@carbon/styles 1.48.0 → 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 (18) hide show
  1. package/css/styles.css +146 -51
  2. package/css/styles.min.css +1 -1
  3. package/package.json +3 -3
  4. package/scss/__tests__/theme-test.js +19 -3
  5. package/scss/components/button/_button.scss +6 -0
  6. package/scss/components/date-picker/_date-picker.scss +1 -1
  7. package/scss/components/fluid-date-picker/_fluid-date-picker.scss +9 -1
  8. package/scss/components/fluid-number-input/_fluid-number-input.scss +4 -1
  9. package/scss/components/fluid-text-area/_fluid-text-area.scss +4 -1
  10. package/scss/components/list-box/_list-box.scss +8 -1
  11. package/scss/components/modal/_modal.scss +1 -1
  12. package/scss/components/number-input/_number-input.scss +11 -1
  13. package/scss/components/select/_select.scss +2 -1
  14. package/scss/components/slug/_slug.scss +3 -9
  15. package/scss/components/text-area/_text-area.scss +2 -1
  16. package/scss/components/text-input/_text-input.scss +2 -1
  17. package/scss/components/tile/_tile.scss +17 -7
  18. package/scss/utilities/_ai-gradient.scss +54 -48
package/css/styles.css CHANGED
@@ -2759,9 +2759,19 @@ em {
2759
2759
  .cds--white {
2760
2760
  background-color: var(--cds-background);
2761
2761
  color: var(--cds-text-primary);
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);
2766
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2767
+ --cds-ai-border-end: #d0e2ff;
2768
+ --cds-ai-border-start: #78a9ff;
2769
+ --cds-ai-border-strong: #4589ff;
2770
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
2762
2771
  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
2763
2772
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
2764
2773
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2774
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2765
2775
  --cds-background: #ffffff;
2766
2776
  --cds-background-active: rgba(141, 141, 141, 0.5);
2767
2777
  --cds-background-brand: #0f62fe;
@@ -2786,6 +2796,15 @@ em {
2786
2796
  --cds-border-tile-01: #c6c6c6;
2787
2797
  --cds-border-tile-02: #a8a8a8;
2788
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;
2789
2808
  --cds-field-01: #f4f4f4;
2790
2809
  --cds-field-02: #ffffff;
2791
2810
  --cds-field-03: #f4f4f4;
@@ -2851,8 +2870,6 @@ em {
2851
2870
  --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
2852
2871
  --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
2853
2872
  --cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
2854
- --cds-slug-callout-border-01: #78a9ff;
2855
- --cds-slug-callout-border-02: #d0e2ff;
2856
2873
  --cds-slug-callout-caret-bottom: #d0e2ff;
2857
2874
  --cds-slug-callout-caret-bottom-background: #d5e5ff;
2858
2875
  --cds-slug-callout-caret-bottom-background-actions: #dae5f8;
@@ -2863,7 +2880,6 @@ em {
2863
2880
  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
2864
2881
  --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
2865
2882
  --cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
2866
- --cds-slug-callout-shadow-inner: rgba(69, 137, 255, 0.2);
2867
2883
  --cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
2868
2884
  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
2869
2885
  --cds-slug-hollow-hover: #474747;
@@ -2962,9 +2978,19 @@ em {
2962
2978
  .cds--g10 {
2963
2979
  background-color: var(--cds-background);
2964
2980
  color: var(--cds-text-primary);
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);
2985
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2986
+ --cds-ai-border-end: #d0e2ff;
2987
+ --cds-ai-border-start: #78a9ff;
2988
+ --cds-ai-border-strong: #4589ff;
2989
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
2965
2990
  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
2966
2991
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
2967
2992
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2993
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2968
2994
  --cds-background: #f4f4f4;
2969
2995
  --cds-background-active: rgba(141, 141, 141, 0.5);
2970
2996
  --cds-background-brand: #0f62fe;
@@ -2989,6 +3015,15 @@ em {
2989
3015
  --cds-border-tile-01: #a8a8a8;
2990
3016
  --cds-border-tile-02: #c6c6c6;
2991
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;
2992
3027
  --cds-field-01: #ffffff;
2993
3028
  --cds-field-02: #f4f4f4;
2994
3029
  --cds-field-03: #ffffff;
@@ -3054,8 +3089,6 @@ em {
3054
3089
  --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
3055
3090
  --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
3056
3091
  --cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
3057
- --cds-slug-callout-border-01: #78a9ff;
3058
- --cds-slug-callout-border-02: #d0e2ff;
3059
3092
  --cds-slug-callout-caret-bottom: #d0e2ff;
3060
3093
  --cds-slug-callout-caret-bottom-background: #ccdbf8;
3061
3094
  --cds-slug-callout-caret-bottom-background-actions: #d2dcee;
@@ -3066,7 +3099,6 @@ em {
3066
3099
  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
3067
3100
  --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
3068
3101
  --cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
3069
- --cds-slug-callout-shadow-inner: rgba(69, 137, 255, 0.2);
3070
3102
  --cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
3071
3103
  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
3072
3104
  --cds-slug-hollow-hover: #474747;
@@ -3165,8 +3197,18 @@ em {
3165
3197
  .cds--g90 {
3166
3198
  background-color: var(--cds-background);
3167
3199
  color: var(--cds-text-primary);
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);
3204
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3205
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3206
+ --cds-ai-border-start: #4589ff;
3207
+ --cds-ai-border-strong: #78a9ff;
3208
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
3168
3209
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3169
3210
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3211
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3170
3212
  --cds-background: #262626;
3171
3213
  --cds-background-active: rgba(141, 141, 141, 0.4);
3172
3214
  --cds-background-brand: #0f62fe;
@@ -3191,6 +3233,15 @@ em {
3191
3233
  --cds-border-tile-01: #6f6f6f;
3192
3234
  --cds-border-tile-02: #8d8d8d;
3193
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;
3194
3245
  --cds-field-01: #393939;
3195
3246
  --cds-field-02: #525252;
3196
3247
  --cds-field-03: #6f6f6f;
@@ -3248,14 +3299,12 @@ em {
3248
3299
  --cds-skeleton-element: #525252;
3249
3300
  --cds-slug-background: #c6c6c6;
3250
3301
  --cds-slug-background-hover: #e0e0e0;
3251
- --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
3302
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
3252
3303
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
3253
3304
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
3254
3305
  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
3255
3306
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
3256
3307
  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
3257
- --cds-slug-callout-border-01: #4589ff;
3258
- --cds-slug-callout-border-02: rgba(166, 200, 255, 0.25);
3259
3308
  --cds-slug-callout-caret-bottom: #465060;
3260
3309
  --cds-slug-callout-caret-bottom-background: #2d3f5c;
3261
3310
  --cds-slug-callout-caret-bottom-background-actions: #253042;
@@ -3266,7 +3315,6 @@ em {
3266
3315
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
3267
3316
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
3268
3317
  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
3269
- --cds-slug-callout-shadow-inner: rgba(69, 137, 255, 0.2);
3270
3318
  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
3271
3319
  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
3272
3320
  --cds-slug-hollow-hover: #b5b5b5;
@@ -3364,8 +3412,18 @@ em {
3364
3412
  .cds--g100 {
3365
3413
  background-color: var(--cds-background);
3366
3414
  color: var(--cds-text-primary);
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);
3419
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3420
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3421
+ --cds-ai-border-start: #4589ff;
3422
+ --cds-ai-border-strong: #78a9ff;
3423
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
3367
3424
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3368
3425
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3426
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3369
3427
  --cds-background: #161616;
3370
3428
  --cds-background-active: rgba(141, 141, 141, 0.4);
3371
3429
  --cds-background-brand: #0f62fe;
@@ -3390,6 +3448,15 @@ em {
3390
3448
  --cds-border-tile-01: #525252;
3391
3449
  --cds-border-tile-02: #6f6f6f;
3392
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;
3393
3460
  --cds-field-01: #262626;
3394
3461
  --cds-field-02: #393939;
3395
3462
  --cds-field-03: #525252;
@@ -3447,14 +3514,12 @@ em {
3447
3514
  --cds-skeleton-element: #393939;
3448
3515
  --cds-slug-background: #c6c6c6;
3449
3516
  --cds-slug-background-hover: #e0e0e0;
3450
- --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
3517
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
3451
3518
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
3452
3519
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
3453
3520
  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
3454
3521
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
3455
3522
  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
3456
- --cds-slug-callout-border-01: #4589ff;
3457
- --cds-slug-callout-border-02: rgba(166, 200, 255, 0.25);
3458
3523
  --cds-slug-callout-caret-bottom: #3d4655;
3459
3524
  --cds-slug-callout-caret-bottom-background: #213250;
3460
3525
  --cds-slug-callout-caret-bottom-background-actions: #192436;
@@ -3465,7 +3530,6 @@ em {
3465
3530
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
3466
3531
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
3467
3532
  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
3468
- --cds-slug-callout-shadow-inner: rgba(69, 137, 255, 0.2);
3469
3533
  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
3470
3534
  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
3471
3535
  --cds-slug-hollow-hover: #b5b5b5;
@@ -4627,6 +4691,11 @@ li.cds--accordion__item--disabled:last-of-type {
4627
4691
  margin: 0;
4628
4692
  }
4629
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
+
4630
4699
  .cds--btn--icon-only.cds--btn--selected {
4631
4700
  background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
4632
4701
  }
@@ -7502,8 +7571,9 @@ fieldset[disabled] .cds--form__helper-text {
7502
7571
  transform: translateY(-50%);
7503
7572
  }
7504
7573
 
7505
- .cds--text-input__field-wrapper--slug .cds--text-input {
7506
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
7574
+ .cds--text-input__field-wrapper--slug .cds--text-input:not(:has(~ .cds--slug--revert)) {
7575
+ background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
7576
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
7507
7577
  padding-inline-end: 2.5rem;
7508
7578
  }
7509
7579
 
@@ -8715,8 +8785,13 @@ fieldset[disabled] .cds--form__helper-text {
8715
8785
  transform: translateY(-50%);
8716
8786
  }
8717
8787
 
8718
- .cds--list-box__wrapper--slug .cds--list-box {
8719
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
8788
+ .cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
8789
+ background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
8790
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
8791
+ }
8792
+
8793
+ .cds--list-box__wrapper--slug .cds--list-box input[role=combobox] {
8794
+ border-block-end-color: transparent;
8720
8795
  }
8721
8796
 
8722
8797
  .cds--list-box__wrapper--slug .cds--list-box__field,
@@ -10578,13 +10653,15 @@ tr.cds--data-table--selected:last-of-type td {
10578
10653
  }
10579
10654
 
10580
10655
  .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
10581
- background-image: linear-gradient(90deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%), linear-gradient(90deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
10656
+ background-image: linear-gradient(90deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
10657
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
10582
10658
  background-attachment: fixed;
10583
10659
  }
10584
10660
 
10585
10661
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
10586
10662
  .cds--data-table thead th:has(> .cds--table-header-label--slug) {
10587
- background-image: linear-gradient(180deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%), linear-gradient(180deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
10663
+ background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
10664
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
10588
10665
  }
10589
10666
 
10590
10667
  .cds--table-column-slug .cds--slug {
@@ -13103,8 +13180,9 @@ th .cds--table-sort__flex {
13103
13180
  transform: translateY(-50%);
13104
13181
  }
13105
13182
 
13106
- .cds--date-picker-input__wrapper--slug .cds--date-picker__input {
13107
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
13183
+ .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(:has(~ .cds--slug--revert)) {
13184
+ background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
13185
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
13108
13186
  padding-inline-end: 4rem;
13109
13187
  }
13110
13188
 
@@ -14828,8 +14906,13 @@ button.cds--dropdown-text:focus {
14828
14906
  inset-block-start: 2.6875rem;
14829
14907
  }
14830
14908
 
14831
- .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug {
14832
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
14909
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(~ .cds--slug--revert)) {
14910
+ background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
14911
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
14912
+ }
14913
+
14914
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(.cds--date-picker__input--invalid) {
14915
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
14833
14916
  }
14834
14917
 
14835
14918
  .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
@@ -15384,12 +15467,17 @@ button.cds--dropdown-text:focus {
15384
15467
  padding-inline-end: 9rem;
15385
15468
  }
15386
15469
 
15387
- .cds--number__input-wrapper--slug input[type=number],
15470
+ .cds--number__input-wrapper--slug input[type=number]:not(:has(~ .cds--slug--revert)),
15388
15471
  .cds--number__input-wrapper--slug input[type=number]:disabled {
15389
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
15472
+ background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
15473
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
15390
15474
  padding-inline-end: 7rem;
15391
15475
  }
15392
15476
 
15477
+ .cds--number__input-wrapper--slug input[type=number]:not([data-invalid]):not(:has(~ .cds--slug--revert)) ~ .cds--number__controls .cds--number__control-btn {
15478
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
15479
+ }
15480
+
15393
15481
  .cds--number.cds--skeleton {
15394
15482
  position: relative;
15395
15483
  padding: 0;
@@ -15641,8 +15729,9 @@ button.cds--dropdown-text:focus {
15641
15729
  padding-inline-end: 7.5rem;
15642
15730
  }
15643
15731
 
15644
- .cds--number-input--fluid .cds--number__input-wrapper--slug {
15645
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
15732
+ .cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(~ .cds--slug--revert)) {
15733
+ background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
15734
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
15646
15735
  }
15647
15736
 
15648
15737
  .cds--search--fluid {
@@ -16019,8 +16108,9 @@ optgroup.cds--select-optgroup:disabled,
16019
16108
  transform: translateY(-50%);
16020
16109
  }
16021
16110
 
16022
- .cds--select--slug .cds--select-input {
16023
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
16111
+ .cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) {
16112
+ background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
16113
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16024
16114
  padding-inline-end: 4rem;
16025
16115
  }
16026
16116
 
@@ -16330,8 +16420,9 @@ optgroup.cds--select-optgroup:disabled,
16330
16420
  transform: translate(0);
16331
16421
  }
16332
16422
 
16333
- .cds--text-area__wrapper--slug .cds--text-area {
16334
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
16423
+ .cds--text-area__wrapper--slug .cds--text-area:not(:has(~ .cds--slug--revert)) {
16424
+ background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
16425
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16335
16426
  padding-inline-end: 2.5rem;
16336
16427
  }
16337
16428
 
@@ -16555,8 +16646,9 @@ optgroup.cds--select-optgroup:disabled,
16555
16646
  inline-size: 80%;
16556
16647
  }
16557
16648
 
16558
- .cds--text-area--fluid .cds--text-area__wrapper--slug {
16559
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
16649
+ .cds--text-area--fluid .cds--text-area__wrapper--slug:not(:has(~ .cds--slug--revert)) {
16650
+ background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
16651
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16560
16652
  }
16561
16653
 
16562
16654
  .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
@@ -17523,12 +17615,12 @@ optgroup.cds--select-optgroup:disabled,
17523
17615
  }
17524
17616
 
17525
17617
  .cds--modal--slug .cds--modal-container {
17526
- background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
17618
+ 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;
17527
17619
  background-color: var(--cds-layer);
17528
17620
  }
17529
17621
 
17530
17622
  .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
17531
- background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
17623
+ background: linear-gradient(to top, 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-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;
17532
17624
  background-color: var(--cds-layer);
17533
17625
  }
17534
17626
 
@@ -20728,10 +20820,10 @@ span.cds--pagination__text.cds--pagination__items-count {
20728
20820
  }
20729
20821
 
20730
20822
  .cds--slug.cds--slug--enabled .cds--slug-content {
20731
- background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
20823
+ 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;
20732
20824
  border: 1px solid transparent;
20733
20825
  border-radius: 0.5rem;
20734
- box-shadow: inset 0 -80px 70px -65px var(--cds-slug-callout-shadow-inner, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
20826
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
20735
20827
  color: var(--cds-text-primary, #161616);
20736
20828
  min-inline-size: 17.5rem;
20737
20829
  }
@@ -20756,7 +20848,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20756
20848
  .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::before {
20757
20849
  position: absolute;
20758
20850
  display: block;
20759
- border: 1px solid var(--cds-slug-callout-border-01, #78a9ff);
20851
+ border: 1px solid var(--cds-ai-border-start, #78a9ff);
20760
20852
  background: var(--cds-background, #ffffff);
20761
20853
  block-size: 0.75rem;
20762
20854
  -webkit-clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
@@ -20890,11 +20982,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20890
20982
  padding-inline: 1.5rem;
20891
20983
  }
20892
20984
 
20893
- .cds--slug.cds--slug--enabled .cds--slug-content--with-actions .cds--toggletip-content {
20894
- max-inline-size: 20.875rem;
20895
- }
20896
-
20897
- .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 {
20898
20986
  max-inline-size: 20rem;
20899
20987
  }
20900
20988
 
@@ -22138,12 +22226,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22138
22226
  }
22139
22227
 
22140
22228
  .cds--tile--slug.cds--tile {
22141
- background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
22142
- 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));
22143
22232
  }
22144
22233
 
22145
22234
  .cds--tile--slug.cds--tile--expandable:hover {
22146
- background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #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;
22147
22236
  }
22148
22237
 
22149
22238
  .cds--tile--slug.cds--tile--selectable::before,
@@ -22162,7 +22251,8 @@ span.cds--pagination__text.cds--pagination__items-count {
22162
22251
 
22163
22252
  .cds--tile--slug.cds--tile--selectable::before,
22164
22253
  .cds--tile--slug.cds--tile--clickable::before {
22165
- 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));
22166
22256
  }
22167
22257
 
22168
22258
  .cds--tile--slug.cds--tile--selectable:hover::before,
@@ -22171,7 +22261,12 @@ span.cds--pagination__text.cds--pagination__items-count {
22171
22261
  }
22172
22262
 
22173
22263
  .cds--tile--slug.cds--tile--selectable::after {
22174
- 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;
22175
22270
  }
22176
22271
 
22177
22272
  .cds--tile--slug.cds--tile--is-selected::after {
@@ -22210,11 +22305,11 @@ span.cds--pagination__text.cds--pagination__items-count {
22210
22305
  .cds--tile--slug-rounded.cds--tile--selectable::before,
22211
22306
  .cds--tile--slug-rounded.cds--tile--selectable::after,
22212
22307
  .cds--tile--slug-rounded.cds--tile--clickable::before {
22213
- border-radius: 1rem;
22308
+ border-radius: 0.5rem;
22214
22309
  }
22215
22310
 
22216
22311
  .cds--tile--slug-rounded .cds--tile__chevron {
22217
- border-end-end-radius: 1rem;
22312
+ border-end-end-radius: 0.5rem;
22218
22313
  }
22219
22314
 
22220
22315
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {