@carbon/styles 1.51.0-rc.0 → 1.51.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.
package/css/styles.css CHANGED
@@ -2774,6 +2774,8 @@ em {
2774
2774
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2775
2775
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2776
2776
  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
2777
+ --cds-ai-skeleton-background: #b8d3ff;
2778
+ --cds-ai-skeleton-element-background: #001141;
2777
2779
  --cds-background: #ffffff;
2778
2780
  --cds-background-active: rgba(141, 141, 141, 0.5);
2779
2781
  --cds-background-brand: #0f62fe;
@@ -2995,6 +2997,8 @@ em {
2995
2997
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2996
2998
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2997
2999
  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3000
+ --cds-ai-skeleton-background: #b8d3ff;
3001
+ --cds-ai-skeleton-element-background: #001141;
2998
3002
  --cds-background: #f4f4f4;
2999
3003
  --cds-background-active: rgba(141, 141, 141, 0.5);
3000
3004
  --cds-background-brand: #0f62fe;
@@ -3215,6 +3219,8 @@ em {
3215
3219
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3216
3220
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3217
3221
  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3222
+ --cds-ai-skeleton-background: #0053ff;
3223
+ --cds-ai-skeleton-element-background: #001141;
3218
3224
  --cds-background: #262626;
3219
3225
  --cds-background-active: rgba(141, 141, 141, 0.4);
3220
3226
  --cds-background-brand: #0f62fe;
@@ -3432,6 +3438,8 @@ em {
3432
3438
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3433
3439
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3434
3440
  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3441
+ --cds-ai-skeleton-background: #0053ff;
3442
+ --cds-ai-skeleton-element-background: #001141;
3435
3443
  --cds-background: #161616;
3436
3444
  --cds-background-active: rgba(141, 141, 141, 0.4);
3437
3445
  --cds-background-brand: #0f62fe;
@@ -20083,6 +20091,14 @@ span.cds--pagination__text.cds--pagination__items-count {
20083
20091
  inset-inline-start: 0;
20084
20092
  }
20085
20093
 
20094
+ @keyframes ai-skeleton-animation {
20095
+ 0% {
20096
+ transform: translateX(-100%);
20097
+ }
20098
+ 100% {
20099
+ transform: translateX(100%);
20100
+ }
20101
+ }
20086
20102
  .cds--icon--skeleton {
20087
20103
  position: relative;
20088
20104
  padding: 0;
@@ -20179,6 +20195,37 @@ span.cds--pagination__text.cds--pagination__items-count {
20179
20195
  block-size: 1.5rem;
20180
20196
  }
20181
20197
 
20198
+ .cds--skeleton__text--ai,
20199
+ .cds--skeleton__placeholder--ai,
20200
+ .cds--skeleton__icon--ai {
20201
+ overflow: hidden;
20202
+ background: var(--cds-ai-skeleton-background, #b8d3ff);
20203
+ }
20204
+
20205
+ .cds--skeleton__text--ai::before,
20206
+ .cds--skeleton__placeholder--ai::before,
20207
+ .cds--skeleton__icon--ai::before {
20208
+ animation: 1250ms ease-in-out ai-skeleton-animation infinite;
20209
+ background: linear-gradient(to right, rgba(0, 17, 65, 0) 0%, rgba(0, 17, 65, 0.5) 50%, rgba(0, 17, 65, 0) 100%);
20210
+ }
20211
+
20212
+ .cds--skeleton__placeholder--ai::before,
20213
+ .cds--skeleton__icon--ai::before {
20214
+ inline-size: 200%;
20215
+ }
20216
+
20217
+ .cds--skeleton__placeholder--ai {
20218
+ border-radius: 0.5rem;
20219
+ }
20220
+
20221
+ .cds--skeleton__text--ai {
20222
+ border-radius: 1rem;
20223
+ }
20224
+
20225
+ .cds--skeleton__icon--ai {
20226
+ border-radius: 0.125rem;
20227
+ }
20228
+
20182
20229
  .cds--slider-container {
20183
20230
  position: relative;
20184
20231
  display: flex;