@carbon/styles 1.5.0-rc.0 → 1.6.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 (9) hide show
  1. package/css/styles.css +99 -101
  2. package/css/styles.min.css +1 -1
  3. package/package.json +13 -11
  4. package/scss/__tests__/zone-test.js +76 -0
  5. package/scss/_zone.scss +2 -2
  6. package/scss/components/data-table/sort/_data-table-sort.scss +1 -0
  7. package/scss/components/modal/_modal.scss +2 -1
  8. package/scss/components/notification/_actionable-notification.scss +1 -0
  9. package/scss/components/tabs/_tabs.scss +6 -0
package/css/styles.css CHANGED
@@ -1078,6 +1078,7 @@ em {
1078
1078
  --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
1079
1079
  --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
1080
1080
  display: grid;
1081
+ width: 100%;
1081
1082
  max-width: 99rem;
1082
1083
  padding-right: var(--cds-grid-margin);
1083
1084
  padding-left: var(--cds-grid-margin);
@@ -3193,61 +3194,56 @@ em {
3193
3194
  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
3194
3195
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
3195
3196
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
3196
- --cds-button-separator: #e0e0e0;
3197
+ --cds-button-separator: #161616;
3197
3198
  --cds-button-primary: #0f62fe;
3198
- --cds-button-secondary: #393939;
3199
- --cds-button-tertiary: #0f62fe;
3199
+ --cds-button-secondary: #6f6f6f;
3200
+ --cds-button-tertiary: #ffffff;
3200
3201
  --cds-button-danger-primary: #da1e28;
3201
- --cds-button-danger-secondary: #da1e28;
3202
+ --cds-button-danger-secondary: #ff8389;
3202
3203
  --cds-button-danger-active: #750e13;
3203
3204
  --cds-button-primary-active: #002d9c;
3204
- --cds-button-secondary-active: #6f6f6f;
3205
- --cds-button-tertiary-active: #002d9c;
3206
- --cds-button-danger-hover: #b81922;
3205
+ --cds-button-secondary-active: #393939;
3206
+ --cds-button-tertiary-active: #c6c6c6;
3207
+ --cds-button-danger-hover: #b81921;
3207
3208
  --cds-button-primary-hover: #0050e6;
3208
- --cds-button-secondary-hover: #474747;
3209
- --cds-button-tertiary-hover: #0050e6;
3210
- --cds-button-disabled: #c6c6c6;
3211
- --cds-notification-background-error: #fff1f1;
3212
- --cds-notification-background-success: #defbe6;
3213
- --cds-notification-background-info: #edf5ff;
3214
- --cds-notification-background-warning: #fdf6dd;
3215
- --cds-notification-action-hover: #ffffff;
3216
- --cds-notification-action-tertiary-inverse: #ffffff;
3217
- --cds-notification-action-tertiary-inverse-active: #c6c6c6;
3218
- --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
3219
- --cds-notification-action-tertiary-inverse-text: #161616;
3220
- --cds-notification-action-tertiary-inverse-text-on-color-disabled: rgba(255, 255, 255, 0.25);
3221
- --cds-tag-background-red: #ffd7d9;
3222
- --cds-tag-color-red: #750e13;
3223
- --cds-tag-hover-red: #ffb3b8;
3224
- --cds-tag-background-magenta: #ffd6e8;
3225
- --cds-tag-color-magenta: #740937;
3226
- --cds-tag-hover-magenta: #ffafd2;
3227
- --cds-tag-background-purple: #e8daff;
3228
- --cds-tag-color-purple: #491d8b;
3229
- --cds-tag-hover-purple: #d4bbff;
3230
- --cds-tag-background-blue: #d0e2ff;
3231
- --cds-tag-color-blue: #002d9c;
3232
- --cds-tag-hover-blue: #a6c8ff;
3233
- --cds-tag-background-cyan: #bae6ff;
3234
- --cds-tag-color-cyan: #003a6d;
3235
- --cds-tag-hover-cyan: #82cfff;
3236
- --cds-tag-background-teal: #9ef0f0;
3237
- --cds-tag-color-teal: #004144;
3238
- --cds-tag-hover-teal: #3ddbd9;
3239
- --cds-tag-background-green: #a7f0ba;
3240
- --cds-tag-color-green: #044317;
3241
- --cds-tag-hover-green: #6fdc8c;
3242
- --cds-tag-background-gray: #e0e0e0;
3243
- --cds-tag-color-gray: #393939;
3244
- --cds-tag-hover-gray: #c6c6c6;
3245
- --cds-tag-background-cool-gray: #dde1e6;
3246
- --cds-tag-color-cool-gray: #343a3f;
3247
- --cds-tag-hover-cool-gray: #c1c7cd;
3248
- --cds-tag-background-warm-gray: #e5e0df;
3249
- --cds-tag-color-warm-gray: #3c3838;
3250
- --cds-tag-hover-warm-gray: #cac5c4;
3209
+ --cds-button-secondary-hover: #5e5e5e;
3210
+ --cds-button-tertiary-hover: #f4f4f4;
3211
+ --cds-button-disabled: rgba(141, 141, 141, 0.3);
3212
+ --cds-notification-action-tertiary-inverse: #0f62fe;
3213
+ --cds-notification-action-tertiary-inverse-active: #002d9c;
3214
+ --cds-notification-action-tertiary-inverse-hover: #0050e6;
3215
+ --cds-notification-action-tertiary-inverse-text: #ffffff;
3216
+ --cds-notification-action-tertiary-inverse-text-on-color-disabled: #8d8d8d;
3217
+ --cds-tag-background-red: #a2191f;
3218
+ --cds-tag-color-red: #ffd7d9;
3219
+ --cds-tag-hover-red: #c21e25;
3220
+ --cds-tag-background-magenta: #9f1853;
3221
+ --cds-tag-color-magenta: #ffd6e8;
3222
+ --cds-tag-hover-magenta: #bf1d63;
3223
+ --cds-tag-background-purple: #6929c4;
3224
+ --cds-tag-color-purple: #e8daff;
3225
+ --cds-tag-hover-purple: #7c3dd6;
3226
+ --cds-tag-background-blue: #0043ce;
3227
+ --cds-tag-color-blue: #d0e2ff;
3228
+ --cds-tag-hover-blue: #0053ff;
3229
+ --cds-tag-background-cyan: #00539a;
3230
+ --cds-tag-color-cyan: #bae6ff;
3231
+ --cds-tag-hover-cyan: #0066bd;
3232
+ --cds-tag-background-teal: #005d5d;
3233
+ --cds-tag-color-teal: #9ef0f0;
3234
+ --cds-tag-hover-teal: #007070;
3235
+ --cds-tag-background-green: #0e6027;
3236
+ --cds-tag-color-green: #a7f0ba;
3237
+ --cds-tag-hover-green: #11742f;
3238
+ --cds-tag-background-gray: #525252;
3239
+ --cds-tag-color-gray: #e0e0e0;
3240
+ --cds-tag-hover-gray: #636363;
3241
+ --cds-tag-background-cool-gray: #4d5358;
3242
+ --cds-tag-color-cool-gray: #dde1e6;
3243
+ --cds-tag-hover-cool-gray: #5d646a;
3244
+ --cds-tag-background-warm-gray: #565151;
3245
+ --cds-tag-color-warm-gray: #e5e0df;
3246
+ --cds-tag-hover-warm-gray: #696363;
3251
3247
  }
3252
3248
 
3253
3249
  .cds--g100 {
@@ -3360,61 +3356,56 @@ em {
3360
3356
  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
3361
3357
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
3362
3358
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
3363
- --cds-button-separator: #e0e0e0;
3359
+ --cds-button-separator: #161616;
3364
3360
  --cds-button-primary: #0f62fe;
3365
- --cds-button-secondary: #393939;
3366
- --cds-button-tertiary: #0f62fe;
3361
+ --cds-button-secondary: #6f6f6f;
3362
+ --cds-button-tertiary: #ffffff;
3367
3363
  --cds-button-danger-primary: #da1e28;
3368
- --cds-button-danger-secondary: #da1e28;
3364
+ --cds-button-danger-secondary: #fa4d56;
3369
3365
  --cds-button-danger-active: #750e13;
3370
3366
  --cds-button-primary-active: #002d9c;
3371
- --cds-button-secondary-active: #6f6f6f;
3372
- --cds-button-tertiary-active: #002d9c;
3373
- --cds-button-danger-hover: #b81922;
3367
+ --cds-button-secondary-active: #393939;
3368
+ --cds-button-tertiary-active: #c6c6c6;
3369
+ --cds-button-danger-hover: #b81921;
3374
3370
  --cds-button-primary-hover: #0050e6;
3375
- --cds-button-secondary-hover: #474747;
3376
- --cds-button-tertiary-hover: #0050e6;
3377
- --cds-button-disabled: #c6c6c6;
3378
- --cds-notification-background-error: #fff1f1;
3379
- --cds-notification-background-success: #defbe6;
3380
- --cds-notification-background-info: #edf5ff;
3381
- --cds-notification-background-warning: #fdf6dd;
3382
- --cds-notification-action-hover: #ffffff;
3383
- --cds-notification-action-tertiary-inverse: #ffffff;
3384
- --cds-notification-action-tertiary-inverse-active: #c6c6c6;
3385
- --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
3386
- --cds-notification-action-tertiary-inverse-text: #161616;
3387
- --cds-notification-action-tertiary-inverse-text-on-color-disabled: rgba(255, 255, 255, 0.25);
3388
- --cds-tag-background-red: #ffd7d9;
3389
- --cds-tag-color-red: #750e13;
3390
- --cds-tag-hover-red: #ffb3b8;
3391
- --cds-tag-background-magenta: #ffd6e8;
3392
- --cds-tag-color-magenta: #740937;
3393
- --cds-tag-hover-magenta: #ffafd2;
3394
- --cds-tag-background-purple: #e8daff;
3395
- --cds-tag-color-purple: #491d8b;
3396
- --cds-tag-hover-purple: #d4bbff;
3397
- --cds-tag-background-blue: #d0e2ff;
3398
- --cds-tag-color-blue: #002d9c;
3399
- --cds-tag-hover-blue: #a6c8ff;
3400
- --cds-tag-background-cyan: #bae6ff;
3401
- --cds-tag-color-cyan: #003a6d;
3402
- --cds-tag-hover-cyan: #82cfff;
3403
- --cds-tag-background-teal: #9ef0f0;
3404
- --cds-tag-color-teal: #004144;
3405
- --cds-tag-hover-teal: #3ddbd9;
3406
- --cds-tag-background-green: #a7f0ba;
3407
- --cds-tag-color-green: #044317;
3408
- --cds-tag-hover-green: #6fdc8c;
3409
- --cds-tag-background-gray: #e0e0e0;
3410
- --cds-tag-color-gray: #393939;
3411
- --cds-tag-hover-gray: #c6c6c6;
3412
- --cds-tag-background-cool-gray: #dde1e6;
3413
- --cds-tag-color-cool-gray: #343a3f;
3414
- --cds-tag-hover-cool-gray: #c1c7cd;
3415
- --cds-tag-background-warm-gray: #e5e0df;
3416
- --cds-tag-color-warm-gray: #3c3838;
3417
- --cds-tag-hover-warm-gray: #cac5c4;
3371
+ --cds-button-secondary-hover: #5e5e5e;
3372
+ --cds-button-tertiary-hover: #f4f4f4;
3373
+ --cds-button-disabled: rgba(141, 141, 141, 0.3);
3374
+ --cds-notification-action-tertiary-inverse: #0f62fe;
3375
+ --cds-notification-action-tertiary-inverse-active: #002d9c;
3376
+ --cds-notification-action-tertiary-inverse-hover: #0050e6;
3377
+ --cds-notification-action-tertiary-inverse-text: #ffffff;
3378
+ --cds-notification-action-tertiary-inverse-text-on-color-disabled: #8d8d8d;
3379
+ --cds-tag-background-red: #a2191f;
3380
+ --cds-tag-color-red: #ffd7d9;
3381
+ --cds-tag-hover-red: #c21e25;
3382
+ --cds-tag-background-magenta: #9f1853;
3383
+ --cds-tag-color-magenta: #ffd6e8;
3384
+ --cds-tag-hover-magenta: #bf1d63;
3385
+ --cds-tag-background-purple: #6929c4;
3386
+ --cds-tag-color-purple: #e8daff;
3387
+ --cds-tag-hover-purple: #7c3dd6;
3388
+ --cds-tag-background-blue: #0043ce;
3389
+ --cds-tag-color-blue: #d0e2ff;
3390
+ --cds-tag-hover-blue: #0053ff;
3391
+ --cds-tag-background-cyan: #00539a;
3392
+ --cds-tag-color-cyan: #bae6ff;
3393
+ --cds-tag-hover-cyan: #0066bd;
3394
+ --cds-tag-background-teal: #005d5d;
3395
+ --cds-tag-color-teal: #9ef0f0;
3396
+ --cds-tag-hover-teal: #007070;
3397
+ --cds-tag-background-green: #0e6027;
3398
+ --cds-tag-color-green: #a7f0ba;
3399
+ --cds-tag-hover-green: #11742f;
3400
+ --cds-tag-background-gray: #525252;
3401
+ --cds-tag-color-gray: #e0e0e0;
3402
+ --cds-tag-hover-gray: #636363;
3403
+ --cds-tag-background-cool-gray: #4d5358;
3404
+ --cds-tag-color-cool-gray: #dde1e6;
3405
+ --cds-tag-hover-cool-gray: #5d646a;
3406
+ --cds-tag-background-warm-gray: #565151;
3407
+ --cds-tag-color-warm-gray: #e5e0df;
3408
+ --cds-tag-hover-warm-gray: #696363;
3418
3409
  }
3419
3410
 
3420
3411
  .cds--accordion {
@@ -9959,6 +9950,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
9959
9950
  .cds--data-table.cds--data-table--sort th > .cds--table-header-label {
9960
9951
  padding-right: 1rem;
9961
9952
  padding-left: 1rem;
9953
+ line-height: 1;
9962
9954
  }
9963
9955
 
9964
9956
  th .cds--table-sort__flex {
@@ -12645,11 +12637,11 @@ button.cds--dropdown-text:focus {
12645
12637
 
12646
12638
  .cds--modal-content p,
12647
12639
  .cds--modal-content__regular-content {
12648
- padding-right: 20%;
12649
12640
  font-size: var(--cds-body-01-font-size, 0.875rem);
12650
12641
  font-weight: var(--cds-body-01-font-weight, 400);
12651
12642
  line-height: var(--cds-body-01-line-height, 1.42857);
12652
12643
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
12644
+ padding-right: calc(20% - 2rem);
12653
12645
  }
12654
12646
 
12655
12647
  .cds--modal-content--with-form {
@@ -13901,6 +13893,8 @@ button.cds--dropdown-text:focus {
13901
13893
  display: -webkit-box;
13902
13894
  display: -ms-flexbox;
13903
13895
  display: flex;
13896
+ -ms-flex-wrap: wrap;
13897
+ flex-wrap: wrap;
13904
13898
  word-break: break-word;
13905
13899
  }
13906
13900
 
@@ -18774,6 +18768,10 @@ span.cds--pagination__text.cds--pagination__items-count {
18774
18768
  }
18775
18769
  }
18776
18770
 
18771
+ .cds--tab-content--interactive:focus {
18772
+ outline: none;
18773
+ }
18774
+
18777
18775
  .cds--tabs.cds--skeleton {
18778
18776
  cursor: default;
18779
18777
  pointer-events: none;