@carbon/styles 1.98.0 → 1.99.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 +53 -61
- package/css/styles.min.css +1 -1
- package/package.json +8 -8
- package/scss/__tests__/carousel-test.js +92 -0
- package/scss/_carbon-utilities.scss +8 -0
- package/scss/components/notification/_actionable-notification.scss +180 -103
- package/scss/components/notification/_inline-notification.scss +172 -97
- package/scss/components/notification/_toast-notification.scss +129 -66
- package/scss/components/popover/_popover.scss +47 -28
- package/scss/components/tabs/_tabs.scss +9 -4
- package/scss/components/toggletip/_toggletip.scss +2 -2
- package/scss/components/treeview/_treeview.scss +4 -1
- package/scss/utilities/_tooltip.scss +12 -10
package/css/styles.css
CHANGED
|
@@ -5256,6 +5256,9 @@ li.cds--accordion__item--disabled:last-of-type {
|
|
|
5256
5256
|
.cds--popover--tab-tip__button:hover {
|
|
5257
5257
|
background-color: var(--cds-layer-hover);
|
|
5258
5258
|
}
|
|
5259
|
+
.cds--popover--tab-tip__button svg {
|
|
5260
|
+
fill: var(--cds-icon-primary, #161616);
|
|
5261
|
+
}
|
|
5259
5262
|
|
|
5260
5263
|
.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
|
|
5261
5264
|
background: var(--cds-layer);
|
|
@@ -5952,10 +5955,10 @@ li.cds--accordion__item--disabled:last-of-type {
|
|
|
5952
5955
|
}
|
|
5953
5956
|
|
|
5954
5957
|
.cds--toggletip-label {
|
|
5955
|
-
font-size: var(--cds-
|
|
5956
|
-
font-weight: var(--cds-
|
|
5957
|
-
line-height: var(--cds-
|
|
5958
|
-
letter-spacing: var(--cds-
|
|
5958
|
+
font-size: var(--cds-label-01-font-size, 0.75rem);
|
|
5959
|
+
font-weight: var(--cds-label-01-font-weight, 400);
|
|
5960
|
+
line-height: var(--cds-label-01-line-height, 1.33333);
|
|
5961
|
+
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
|
5959
5962
|
color: var(--cds-text-secondary, #525252);
|
|
5960
5963
|
margin-inline-end: 0.5rem;
|
|
5961
5964
|
}
|
|
@@ -8576,7 +8579,7 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
8576
8579
|
.cds--copy-btn .cds--copy-btn__feedback {
|
|
8577
8580
|
box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
|
8578
8581
|
z-index: 6000;
|
|
8579
|
-
padding: 0.
|
|
8582
|
+
padding: 0.1875rem 1rem;
|
|
8580
8583
|
border-radius: 0.125rem;
|
|
8581
8584
|
background-color: var(--cds-background-inverse, #393939);
|
|
8582
8585
|
block-size: auto;
|
|
@@ -8746,7 +8749,7 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
8746
8749
|
.cds--snippet--inline .cds--copy-btn__feedback {
|
|
8747
8750
|
box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
|
8748
8751
|
z-index: 6000;
|
|
8749
|
-
padding: 0.
|
|
8752
|
+
padding: 0.1875rem 1rem;
|
|
8750
8753
|
border-radius: 0.125rem;
|
|
8751
8754
|
background-color: var(--cds-background-inverse, #393939);
|
|
8752
8755
|
block-size: auto;
|
|
@@ -9412,7 +9415,7 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
9412
9415
|
.cds--text-input--password__visibility + .cds--assistive-text {
|
|
9413
9416
|
box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
|
|
9414
9417
|
z-index: 6000;
|
|
9415
|
-
padding: 0.
|
|
9418
|
+
padding: 0.1875rem 1rem;
|
|
9416
9419
|
border-radius: 0.125rem;
|
|
9417
9420
|
background-color: var(--cds-background-inverse, #393939);
|
|
9418
9421
|
block-size: auto;
|
|
@@ -9515,13 +9518,13 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
9515
9518
|
.cds--text-input--password__visibility::before {
|
|
9516
9519
|
border-width: 0 0.25rem 0.3125rem;
|
|
9517
9520
|
border-color: transparent transparent var(--cds-background-inverse, #393939);
|
|
9518
|
-
inset-block-end: -0.
|
|
9521
|
+
inset-block-end: -0.5rem;
|
|
9519
9522
|
transform: translate(-50%, 100%);
|
|
9520
9523
|
}
|
|
9521
9524
|
.cds--text-input--password__visibility::after,
|
|
9522
9525
|
.cds--text-input--password__visibility .cds--assistive-text,
|
|
9523
9526
|
.cds--text-input--password__visibility + .cds--assistive-text {
|
|
9524
|
-
inset-block-end: -0.
|
|
9527
|
+
inset-block-end: -0.8125rem;
|
|
9525
9528
|
transform: translate(-50%, 100%);
|
|
9526
9529
|
}
|
|
9527
9530
|
|
|
@@ -22010,6 +22013,18 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22010
22013
|
.cds--inline-notification--low-contrast {
|
|
22011
22014
|
color: var(--cds-text-primary, #161616);
|
|
22012
22015
|
}
|
|
22016
|
+
.cds--inline-notification--low-contrast .cds--inline-notification__close-button:focus {
|
|
22017
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
|
22018
|
+
outline-offset: -2px;
|
|
22019
|
+
}
|
|
22020
|
+
@media screen and (prefers-contrast) {
|
|
22021
|
+
.cds--inline-notification--low-contrast .cds--inline-notification__close-button:focus {
|
|
22022
|
+
outline-style: dotted;
|
|
22023
|
+
}
|
|
22024
|
+
}
|
|
22025
|
+
.cds--inline-notification--low-contrast .cds--inline-notification__close-button .cds--inline-notification__close-icon {
|
|
22026
|
+
fill: var(--cds-icon-primary, #161616);
|
|
22027
|
+
}
|
|
22013
22028
|
.cds--inline-notification--low-contrast::before {
|
|
22014
22029
|
position: absolute;
|
|
22015
22030
|
box-sizing: border-box;
|
|
@@ -22252,20 +22267,6 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22252
22267
|
}
|
|
22253
22268
|
}
|
|
22254
22269
|
|
|
22255
|
-
.cds--inline-notification--low-contrast .cds--inline-notification__close-button:focus {
|
|
22256
|
-
outline: 2px solid var(--cds-focus, #0f62fe);
|
|
22257
|
-
outline-offset: -2px;
|
|
22258
|
-
}
|
|
22259
|
-
@media screen and (prefers-contrast) {
|
|
22260
|
-
.cds--inline-notification--low-contrast .cds--inline-notification__close-button:focus {
|
|
22261
|
-
outline-style: dotted;
|
|
22262
|
-
}
|
|
22263
|
-
}
|
|
22264
|
-
|
|
22265
|
-
.cds--inline-notification--low-contrast .cds--inline-notification__close-button .cds--inline-notification__close-icon {
|
|
22266
|
-
fill: var(--cds-icon-primary, #161616);
|
|
22267
|
-
}
|
|
22268
|
-
|
|
22269
22270
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
|
22270
22271
|
.cds--inline-notification {
|
|
22271
22272
|
outline: 1px solid transparent;
|
|
@@ -22338,6 +22339,22 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22338
22339
|
.cds--toast-notification--low-contrast {
|
|
22339
22340
|
color: var(--cds-text-primary, #161616);
|
|
22340
22341
|
}
|
|
22342
|
+
.cds--toast-notification--low-contrast .cds--toast-notification__subtitle,
|
|
22343
|
+
.cds--toast-notification--low-contrast .cds--toast-notification__caption {
|
|
22344
|
+
color: var(--cds-text-primary, #161616);
|
|
22345
|
+
}
|
|
22346
|
+
.cds--toast-notification--low-contrast .cds--toast-notification__close-button .cds--toast-notification__close-icon {
|
|
22347
|
+
fill: var(--cds-icon-primary, #161616);
|
|
22348
|
+
}
|
|
22349
|
+
.cds--toast-notification--low-contrast .cds--toast-notification__close-button:focus {
|
|
22350
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
|
22351
|
+
outline-offset: -2px;
|
|
22352
|
+
}
|
|
22353
|
+
@media screen and (prefers-contrast) {
|
|
22354
|
+
.cds--toast-notification--low-contrast .cds--toast-notification__close-button:focus {
|
|
22355
|
+
outline-style: dotted;
|
|
22356
|
+
}
|
|
22357
|
+
}
|
|
22341
22358
|
|
|
22342
22359
|
.cds--toast-notification--error {
|
|
22343
22360
|
background: var(--cds-background-inverse, #393939);
|
|
@@ -22478,20 +22495,6 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22478
22495
|
fill: var(--cds-icon-inverse, #ffffff);
|
|
22479
22496
|
}
|
|
22480
22497
|
|
|
22481
|
-
.cds--toast-notification--low-contrast .cds--toast-notification__close-button:focus {
|
|
22482
|
-
outline: 2px solid var(--cds-focus, #0f62fe);
|
|
22483
|
-
outline-offset: -2px;
|
|
22484
|
-
}
|
|
22485
|
-
@media screen and (prefers-contrast) {
|
|
22486
|
-
.cds--toast-notification--low-contrast .cds--toast-notification__close-button:focus {
|
|
22487
|
-
outline-style: dotted;
|
|
22488
|
-
}
|
|
22489
|
-
}
|
|
22490
|
-
|
|
22491
|
-
.cds--toast-notification--low-contrast .cds--toast-notification__close-button .cds--toast-notification__close-icon {
|
|
22492
|
-
fill: var(--cds-icon-primary, #161616);
|
|
22493
|
-
}
|
|
22494
|
-
|
|
22495
22498
|
.cds--toast-notification__title {
|
|
22496
22499
|
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
|
22497
22500
|
font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
|
@@ -22512,10 +22515,6 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22512
22515
|
word-break: break-word;
|
|
22513
22516
|
}
|
|
22514
22517
|
|
|
22515
|
-
.cds--toast-notification--low-contrast .cds--toast-notification__subtitle {
|
|
22516
|
-
color: var(--cds-text-primary, #161616);
|
|
22517
|
-
}
|
|
22518
|
-
|
|
22519
22518
|
.cds--toast-notification__caption {
|
|
22520
22519
|
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
|
22521
22520
|
font-weight: var(--cds-body-compact-01-font-weight, 400);
|
|
@@ -22525,10 +22524,6 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22525
22524
|
padding-block-start: 0.5rem;
|
|
22526
22525
|
}
|
|
22527
22526
|
|
|
22528
|
-
.cds--toast-notification--low-contrast .cds--toast-notification__caption {
|
|
22529
|
-
color: var(--cds-text-primary, #161616);
|
|
22530
|
-
}
|
|
22531
|
-
|
|
22532
22527
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
|
22533
22528
|
.cds--toast-notification {
|
|
22534
22529
|
outline: 1px solid transparent;
|
|
@@ -22621,6 +22616,13 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22621
22616
|
.cds--actionable-notification--low-contrast {
|
|
22622
22617
|
color: var(--cds-text-primary, #161616);
|
|
22623
22618
|
}
|
|
22619
|
+
.cds--actionable-notification--low-contrast .cds--actionable-notification__subtitle,
|
|
22620
|
+
.cds--actionable-notification--low-contrast .cds--actionable-notification__caption {
|
|
22621
|
+
color: var(--cds-text-primary, #161616);
|
|
22622
|
+
}
|
|
22623
|
+
.cds--actionable-notification--low-contrast .cds--actionable-notification__close-button .cds--actionable-notification__close-icon {
|
|
22624
|
+
fill: var(--cds-icon-primary, #161616);
|
|
22625
|
+
}
|
|
22624
22626
|
|
|
22625
22627
|
.cds--actionable-notification--low-contrast:not(.cds--actionable-notification--toast)::before {
|
|
22626
22628
|
position: absolute;
|
|
@@ -22834,10 +22836,6 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22834
22836
|
word-break: break-word;
|
|
22835
22837
|
}
|
|
22836
22838
|
|
|
22837
|
-
.cds--actionable-notification--low-contrast .cds--actionable-notification__subtitle {
|
|
22838
|
-
color: var(--cds-text-primary, #161616);
|
|
22839
|
-
}
|
|
22840
|
-
|
|
22841
22839
|
.cds--actionable-notification__caption {
|
|
22842
22840
|
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
|
22843
22841
|
font-weight: var(--cds-body-compact-01-font-weight, 400);
|
|
@@ -22847,10 +22845,6 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22847
22845
|
padding-block-start: 1.5rem;
|
|
22848
22846
|
}
|
|
22849
22847
|
|
|
22850
|
-
.cds--actionable-notification--low-contrast .cds--actionable-notification__caption {
|
|
22851
|
-
color: var(--cds-text-primary, #161616);
|
|
22852
|
-
}
|
|
22853
|
-
|
|
22854
22848
|
/* Ghost action button when inline */
|
|
22855
22849
|
.cds--actionable-notification__action-button.cds--btn--ghost {
|
|
22856
22850
|
block-size: 2rem;
|
|
@@ -23002,10 +22996,6 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
23002
22996
|
}
|
|
23003
22997
|
}
|
|
23004
22998
|
|
|
23005
|
-
.cds--actionable-notification--low-contrast .cds--actionable-notification__close-button .cds--actionable-notification__close-icon {
|
|
23006
|
-
fill: var(--cds-icon-primary, #161616);
|
|
23007
|
-
}
|
|
23008
|
-
|
|
23009
22999
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
|
23010
23000
|
.cds--actionable-notification {
|
|
23011
23001
|
outline: 1px solid transparent;
|
|
@@ -26212,9 +26202,11 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
26212
26202
|
}
|
|
26213
26203
|
|
|
26214
26204
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
|
26215
|
-
.cds--tabs__nav-item
|
|
26216
|
-
|
|
26217
|
-
|
|
26205
|
+
.cds--tabs__nav-item--selected .cds--tabs__nav-link,
|
|
26206
|
+
.cds--tabs__nav-item--selected.cds--tabs__nav-link,
|
|
26207
|
+
.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected,
|
|
26208
|
+
.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected.cds--tabs__nav-link {
|
|
26209
|
+
background-color: SelectedItem;
|
|
26218
26210
|
}
|
|
26219
26211
|
}
|
|
26220
26212
|
|
|
@@ -27426,7 +27418,7 @@ li.cds--tree-node-link-parent > .cds--tree-node__children {
|
|
|
27426
27418
|
inline-size: 100%;
|
|
27427
27419
|
}
|
|
27428
27420
|
|
|
27429
|
-
.cds--tooltip-trigger__wrapper .cds--btn--ghost:focus {
|
|
27421
|
+
.cds--tree .cds--tree-node__label .cds--tooltip-trigger__wrapper .cds--btn--ghost:focus {
|
|
27430
27422
|
box-shadow: none;
|
|
27431
27423
|
outline: 2px solid var(--cds-focus, #0f62fe);
|
|
27432
27424
|
}
|