@carbon/styles 1.48.0 → 1.48.1

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 (15) hide show
  1. package/css/styles.css +80 -41
  2. package/css/styles.min.css +1 -1
  3. package/package.json +3 -3
  4. package/scss/__tests__/theme-test.js +7 -3
  5. package/scss/components/date-picker/_date-picker.scss +1 -1
  6. package/scss/components/fluid-date-picker/_fluid-date-picker.scss +9 -1
  7. package/scss/components/fluid-number-input/_fluid-number-input.scss +4 -1
  8. package/scss/components/fluid-text-area/_fluid-text-area.scss +4 -1
  9. package/scss/components/list-box/_list-box.scss +8 -1
  10. package/scss/components/number-input/_number-input.scss +6 -1
  11. package/scss/components/select/_select.scss +2 -1
  12. package/scss/components/slug/_slug.scss +2 -2
  13. package/scss/components/text-area/_text-area.scss +2 -1
  14. package/scss/components/text-input/_text-input.scss +2 -1
  15. package/scss/utilities/_ai-gradient.scss +14 -21
package/css/styles.css CHANGED
@@ -2759,9 +2759,16 @@ 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-start: rgba(69, 137, 255, 0.1);
2764
+ --cds-ai-border-end: #d0e2ff;
2765
+ --cds-ai-border-start: #78a9ff;
2766
+ --cds-ai-border-strong: #4589ff;
2767
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
2762
2768
  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
2763
2769
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
2764
2770
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2771
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2765
2772
  --cds-background: #ffffff;
2766
2773
  --cds-background-active: rgba(141, 141, 141, 0.5);
2767
2774
  --cds-background-brand: #0f62fe;
@@ -2851,8 +2858,6 @@ em {
2851
2858
  --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
2852
2859
  --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
2853
2860
  --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
2861
  --cds-slug-callout-caret-bottom: #d0e2ff;
2857
2862
  --cds-slug-callout-caret-bottom-background: #d5e5ff;
2858
2863
  --cds-slug-callout-caret-bottom-background-actions: #dae5f8;
@@ -2863,7 +2868,6 @@ em {
2863
2868
  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
2864
2869
  --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
2865
2870
  --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
2871
  --cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
2868
2872
  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
2869
2873
  --cds-slug-hollow-hover: #474747;
@@ -2962,9 +2966,16 @@ em {
2962
2966
  .cds--g10 {
2963
2967
  background-color: var(--cds-background);
2964
2968
  color: var(--cds-text-primary);
2969
+ --cds-ai-aura-end: rgba(255, 255, 255, 0);
2970
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2971
+ --cds-ai-border-end: #d0e2ff;
2972
+ --cds-ai-border-start: #78a9ff;
2973
+ --cds-ai-border-strong: #4589ff;
2974
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
2965
2975
  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
2966
2976
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
2967
2977
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2978
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2968
2979
  --cds-background: #f4f4f4;
2969
2980
  --cds-background-active: rgba(141, 141, 141, 0.5);
2970
2981
  --cds-background-brand: #0f62fe;
@@ -3054,8 +3065,6 @@ em {
3054
3065
  --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
3055
3066
  --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
3056
3067
  --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
3068
  --cds-slug-callout-caret-bottom: #d0e2ff;
3060
3069
  --cds-slug-callout-caret-bottom-background: #ccdbf8;
3061
3070
  --cds-slug-callout-caret-bottom-background-actions: #d2dcee;
@@ -3066,7 +3075,6 @@ em {
3066
3075
  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
3067
3076
  --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
3068
3077
  --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
3078
  --cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
3071
3079
  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
3072
3080
  --cds-slug-hollow-hover: #474747;
@@ -3165,8 +3173,15 @@ em {
3165
3173
  .cds--g90 {
3166
3174
  background-color: var(--cds-background);
3167
3175
  color: var(--cds-text-primary);
3176
+ --cds-ai-aura-end: rgba(0, 0, 0, 0);
3177
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3178
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3179
+ --cds-ai-border-start: #4589ff;
3180
+ --cds-ai-border-strong: #78a9ff;
3181
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
3168
3182
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3169
3183
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3184
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3170
3185
  --cds-background: #262626;
3171
3186
  --cds-background-active: rgba(141, 141, 141, 0.4);
3172
3187
  --cds-background-brand: #0f62fe;
@@ -3248,14 +3263,12 @@ em {
3248
3263
  --cds-skeleton-element: #525252;
3249
3264
  --cds-slug-background: #c6c6c6;
3250
3265
  --cds-slug-background-hover: #e0e0e0;
3251
- --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
3266
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
3252
3267
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
3253
3268
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
3254
3269
  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
3255
3270
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
3256
3271
  --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
3272
  --cds-slug-callout-caret-bottom: #465060;
3260
3273
  --cds-slug-callout-caret-bottom-background: #2d3f5c;
3261
3274
  --cds-slug-callout-caret-bottom-background-actions: #253042;
@@ -3266,7 +3279,6 @@ em {
3266
3279
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
3267
3280
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
3268
3281
  --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
3282
  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
3271
3283
  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
3272
3284
  --cds-slug-hollow-hover: #b5b5b5;
@@ -3364,8 +3376,15 @@ em {
3364
3376
  .cds--g100 {
3365
3377
  background-color: var(--cds-background);
3366
3378
  color: var(--cds-text-primary);
3379
+ --cds-ai-aura-end: rgba(0, 0, 0, 0);
3380
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3381
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3382
+ --cds-ai-border-start: #4589ff;
3383
+ --cds-ai-border-strong: #78a9ff;
3384
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
3367
3385
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3368
3386
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3387
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3369
3388
  --cds-background: #161616;
3370
3389
  --cds-background-active: rgba(141, 141, 141, 0.4);
3371
3390
  --cds-background-brand: #0f62fe;
@@ -3447,14 +3466,12 @@ em {
3447
3466
  --cds-skeleton-element: #393939;
3448
3467
  --cds-slug-background: #c6c6c6;
3449
3468
  --cds-slug-background-hover: #e0e0e0;
3450
- --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
3469
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
3451
3470
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
3452
3471
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
3453
3472
  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
3454
3473
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
3455
3474
  --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
3475
  --cds-slug-callout-caret-bottom: #3d4655;
3459
3476
  --cds-slug-callout-caret-bottom-background: #213250;
3460
3477
  --cds-slug-callout-caret-bottom-background-actions: #192436;
@@ -3465,7 +3482,6 @@ em {
3465
3482
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
3466
3483
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
3467
3484
  --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
3485
  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
3470
3486
  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
3471
3487
  --cds-slug-hollow-hover: #b5b5b5;
@@ -7502,8 +7518,9 @@ fieldset[disabled] .cds--form__helper-text {
7502
7518
  transform: translateY(-50%);
7503
7519
  }
7504
7520
 
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%);
7521
+ .cds--text-input__field-wrapper--slug .cds--text-input:not(:has(~ .cds--slug--revert)) {
7522
+ 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%);
7523
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
7507
7524
  padding-inline-end: 2.5rem;
7508
7525
  }
7509
7526
 
@@ -8715,8 +8732,13 @@ fieldset[disabled] .cds--form__helper-text {
8715
8732
  transform: translateY(-50%);
8716
8733
  }
8717
8734
 
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%);
8735
+ .cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
8736
+ 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%);
8737
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
8738
+ }
8739
+
8740
+ .cds--list-box__wrapper--slug .cds--list-box input[role=combobox] {
8741
+ border-block-end-color: transparent;
8720
8742
  }
8721
8743
 
8722
8744
  .cds--list-box__wrapper--slug .cds--list-box__field,
@@ -10578,13 +10600,15 @@ tr.cds--data-table--selected:last-of-type td {
10578
10600
  }
10579
10601
 
10580
10602
  .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%);
10603
+ 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%);
10604
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
10582
10605
  background-attachment: fixed;
10583
10606
  }
10584
10607
 
10585
10608
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
10586
10609
  .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%);
10610
+ 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%);
10611
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
10588
10612
  }
10589
10613
 
10590
10614
  .cds--table-column-slug .cds--slug {
@@ -13103,8 +13127,9 @@ th .cds--table-sort__flex {
13103
13127
  transform: translateY(-50%);
13104
13128
  }
13105
13129
 
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%);
13130
+ .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(:has(~ .cds--slug--revert)) {
13131
+ 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%);
13132
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
13108
13133
  padding-inline-end: 4rem;
13109
13134
  }
13110
13135
 
@@ -14828,8 +14853,13 @@ button.cds--dropdown-text:focus {
14828
14853
  inset-block-start: 2.6875rem;
14829
14854
  }
14830
14855
 
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%);
14856
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(~ .cds--slug--revert)) {
14857
+ 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%);
14858
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
14859
+ }
14860
+
14861
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(.cds--date-picker__input--invalid) {
14862
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
14833
14863
  }
14834
14864
 
14835
14865
  .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
@@ -15384,12 +15414,17 @@ button.cds--dropdown-text:focus {
15384
15414
  padding-inline-end: 9rem;
15385
15415
  }
15386
15416
 
15387
- .cds--number__input-wrapper--slug input[type=number],
15417
+ .cds--number__input-wrapper--slug input[type=number]:not(:has(~ .cds--slug--revert)),
15388
15418
  .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%);
15419
+ 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%);
15420
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
15390
15421
  padding-inline-end: 7rem;
15391
15422
  }
15392
15423
 
15424
+ .cds--number__input-wrapper--slug .cds--number__control-btn {
15425
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
15426
+ }
15427
+
15393
15428
  .cds--number.cds--skeleton {
15394
15429
  position: relative;
15395
15430
  padding: 0;
@@ -15641,8 +15676,9 @@ button.cds--dropdown-text:focus {
15641
15676
  padding-inline-end: 7.5rem;
15642
15677
  }
15643
15678
 
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%);
15679
+ .cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(~ .cds--slug--revert)) {
15680
+ 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%);
15681
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
15646
15682
  }
15647
15683
 
15648
15684
  .cds--search--fluid {
@@ -16019,8 +16055,9 @@ optgroup.cds--select-optgroup:disabled,
16019
16055
  transform: translateY(-50%);
16020
16056
  }
16021
16057
 
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%);
16058
+ .cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) {
16059
+ 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%);
16060
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16024
16061
  padding-inline-end: 4rem;
16025
16062
  }
16026
16063
 
@@ -16330,8 +16367,9 @@ optgroup.cds--select-optgroup:disabled,
16330
16367
  transform: translate(0);
16331
16368
  }
16332
16369
 
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%);
16370
+ .cds--text-area__wrapper--slug .cds--text-area:not(:has(~ .cds--slug--revert)) {
16371
+ 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%);
16372
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16335
16373
  padding-inline-end: 2.5rem;
16336
16374
  }
16337
16375
 
@@ -16555,8 +16593,9 @@ optgroup.cds--select-optgroup:disabled,
16555
16593
  inline-size: 80%;
16556
16594
  }
16557
16595
 
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%);
16596
+ .cds--text-area--fluid .cds--text-area__wrapper--slug:not(:has(~ .cds--slug--revert)) {
16597
+ 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%);
16598
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
16560
16599
  }
16561
16600
 
16562
16601
  .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
@@ -17523,12 +17562,12 @@ optgroup.cds--select-optgroup:disabled,
17523
17562
  }
17524
17563
 
17525
17564
  .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;
17565
+ 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
17566
  background-color: var(--cds-layer);
17528
17567
  }
17529
17568
 
17530
17569
  .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;
17570
+ 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
17571
  background-color: var(--cds-layer);
17533
17572
  }
17534
17573
 
@@ -20728,10 +20767,10 @@ span.cds--pagination__text.cds--pagination__items-count {
20728
20767
  }
20729
20768
 
20730
20769
  .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;
20770
+ 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
20771
  border: 1px solid transparent;
20733
20772
  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));
20773
+ 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
20774
  color: var(--cds-text-primary, #161616);
20736
20775
  min-inline-size: 17.5rem;
20737
20776
  }
@@ -20756,7 +20795,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20756
20795
  .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::before {
20757
20796
  position: absolute;
20758
20797
  display: block;
20759
- border: 1px solid var(--cds-slug-callout-border-01, #78a9ff);
20798
+ border: 1px solid var(--cds-ai-border-start, #78a9ff);
20760
20799
  background: var(--cds-background, #ffffff);
20761
20800
  block-size: 0.75rem;
20762
20801
  -webkit-clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
@@ -22138,12 +22177,12 @@ span.cds--pagination__text.cds--pagination__items-count {
22138
22177
  }
22139
22178
 
22140
22179
  .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;
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;
22142
22181
  border: 1px solid var(--cds-border-tile);
22143
22182
  }
22144
22183
 
22145
22184
  .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;
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;
22147
22186
  }
22148
22187
 
22149
22188
  .cds--tile--slug.cds--tile--selectable::before,