@patternfly/patternfly 5.0.0-alpha.51 → 5.0.0-alpha.52

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 (21) hide show
  1. package/base/patternfly-variables.css +2 -2
  2. package/components/AboutModalBox/about-modal-box.css +1 -20
  3. package/components/AboutModalBox/about-modal-box.scss +3 -24
  4. package/components/BackgroundImage/background-image.css +1 -2
  5. package/components/BackgroundImage/background-image.scss +1 -2
  6. package/components/FormControl/form-control.css +0 -7
  7. package/components/FormControl/form-control.scss +7 -7
  8. package/components/Icon/icon.css +25 -24
  9. package/components/Icon/icon.scss +30 -31
  10. package/docs/components/AboutModalBox/examples/AboutModalBox.md +7 -9
  11. package/docs/components/BackgroundImage/examples/BackgroundImage.md +7 -11
  12. package/docs/components/Login/examples/Login.md +20 -5
  13. package/docs/demos/AboutModal/examples/AboutModal.md +4 -1
  14. package/package.json +1 -1
  15. package/patternfly-base-no-globals.css +2 -2
  16. package/patternfly-base.css +2 -2
  17. package/patternfly-no-globals.css +29 -55
  18. package/patternfly.css +29 -55
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
  21. package/sass-utilities/scss-variables.scss +2 -5
package/patternfly-no-globals.css CHANGED
@@ -276,8 +276,8 @@
276
276
  --pf-v5-global--BorderRadius--lg: 30em;
277
277
  --pf-v5-global--icon--Color--light: #6a6e73;
278
278
  --pf-v5-global--icon--Color--dark: #151515;
279
- --pf-v5-global--icon--FontSize--sm: 0.625rem;
280
- --pf-v5-global--icon--FontSize--md: 1.125rem;
279
+ --pf-v5-global--icon--FontSize--sm: 0.75rem;
280
+ --pf-v5-global--icon--FontSize--md: 1rem;
281
281
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
282
282
  --pf-v5-global--icon--FontSize--xl: 3.375rem;
283
283
  --pf-v5-global--FontFamily--sans-serif: "RedHatText", helvetica, arial, sans-serif;
@@ -5324,7 +5324,6 @@
5324
5324
 
5325
5325
  .pf-v5-c-about-modal-box {
5326
5326
  --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
5327
- --pf-v5-c-about-modal-box--BackgroundImage: url("./assets/images/pfbg-icon.svg");
5328
5327
  --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
5329
5328
  --pf-v5-c-about-modal-box--BackgroundSize--min-width: 200px;
5330
5329
  --pf-v5-c-about-modal-box--BackgroundSize--width: 60%;
@@ -5355,9 +5354,6 @@
5355
5354
  --pf-v5-c-about-modal-box__close--c-button--Height: calc(var(--pf-v5-c-about-modal-box__close--c-button--FontSize) * 2);
5356
5355
  --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-global--palette--black-1000);
5357
5356
  --pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor: rgba(3, 3, 3, 0.4);
5358
- --pf-v5-c-about-modal-box__hero--sm--BackgroundImage: url("./assets/images/pfbg_992@2x.jpg");
5359
- --pf-v5-c-about-modal-box__hero--sm--BackgroundPosition: top left;
5360
- --pf-v5-c-about-modal-box__hero--sm--BackgroundSize: cover;
5361
5357
  --pf-v5-c-about-modal-box__brand-image--Height: 2.5rem;
5362
5358
  --pf-v5-c-about-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--xl);
5363
5359
  --pf-v5-c-about-modal-box__header--PaddingBottom: var(--pf-v5-global--spacer--sm);
@@ -5385,7 +5381,7 @@
5385
5381
  overflow-x: hidden;
5386
5382
  overflow-y: auto;
5387
5383
  background-color: var(--pf-v5-c-about-modal-box--BackgroundColor);
5388
- background-image: var(--pf-v5-c-about-modal-box--BackgroundImage);
5384
+ background-image: var(--pf-v5-c-about-modal-box--BackgroundImage, none);
5389
5385
  background-repeat: no-repeat;
5390
5386
  background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
5391
5387
  background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
@@ -5522,21 +5518,6 @@
5522
5518
  --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor);
5523
5519
  }
5524
5520
 
5525
- .pf-v5-c-about-modal-box__hero {
5526
- display: none;
5527
- }
5528
- @media only screen and (min-width: 576px) {
5529
- .pf-v5-c-about-modal-box__hero {
5530
- display: block;
5531
- grid-area: hero;
5532
- background-image: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundImage);
5533
- background-repeat: no-repeat;
5534
- background-attachment: fixed;
5535
- background-position: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundPosition);
5536
- background-size: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundSize);
5537
- }
5538
- }
5539
-
5540
5521
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
5541
5522
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
5542
5523
  :where(.pf-v5-theme-dark) .pf-v5-c-page__header, :where(.pf-v5-theme-dark) .pf-v5-c-masthead, :where(.pf-v5-theme-dark) .pf-v5-c-login__header,
@@ -6611,7 +6592,6 @@
6611
6592
 
6612
6593
  .pf-v5-c-background-image {
6613
6594
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
6614
- --pf-v5-c-background-image--BackgroundImage: url("./assets/images/pfbg-icon.svg");
6615
6595
  --pf-v5-c-background-image--BackgroundPosition: bottom right;
6616
6596
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6617
6597
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
@@ -6624,7 +6604,7 @@
6624
6604
  width: 100%;
6625
6605
  height: 100%;
6626
6606
  background-color: var(--pf-v5-c-background-image--BackgroundColor);
6627
- background-image: var(--pf-v5-c-background-image--BackgroundImage);
6607
+ background-image: var(--pf-v5-c-background-image--BackgroundImage, none);
6628
6608
  background-repeat: no-repeat;
6629
6609
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
6630
6610
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
@@ -14835,13 +14815,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14835
14815
  --pf-v5-c-form-control--textarea--success--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
14836
14816
  --pf-v5-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
14837
14817
  --pf-v5-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
14838
- --pf-v5-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
14839
- --pf-v5-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#warning");
14840
- --pf-v5-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
14841
- --pf-v5-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
14842
- --pf-v5-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
14843
- --pf-v5-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
14844
- --pf-v5-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#clock");
14845
14818
  --pf-v5-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-v5-c-form-control--FontSize);
14846
14819
  --pf-v5-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-v5-global--spacer--md) + 7px);
14847
14820
  --pf-v5-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-v5-global--spacer--md) + 1px - var(--pf-v5-global--spacer--lg));
@@ -15241,31 +15214,32 @@ textarea.pf-v5-c-form-control {
15241
15214
  }
15242
15215
 
15243
15216
  .pf-v5-c-icon {
15244
- --pf-v5-c-icon--Width: var(--pf-v5-global--icon--FontSize--md);
15245
- --pf-v5-c-icon--Height: var(--pf-v5-global--icon--FontSize--md);
15246
- --pf-v5-c-icon--m-inline--Width: 1em;
15247
- --pf-v5-c-icon--m-inline--Height: 1em;
15217
+ --pf-v5-c-icon--Width: 1em;
15218
+ --pf-v5-c-icon--Height: 1em;
15248
15219
  --pf-v5-c-icon--m-sm--Width: var(--pf-v5-global--icon--FontSize--sm);
15249
- --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
15250
- --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
15251
- --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
15252
15220
  --pf-v5-c-icon--m-sm--Height: var(--pf-v5-global--icon--FontSize--sm);
15221
+ --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
15253
15222
  --pf-v5-c-icon--m-md--Height: var(--pf-v5-global--icon--FontSize--md);
15223
+ --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
15254
15224
  --pf-v5-c-icon--m-lg--Height: var(--pf-v5-global--icon--FontSize--lg);
15225
+ --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
15255
15226
  --pf-v5-c-icon--m-xl--Height: var(--pf-v5-global--icon--FontSize--xl);
15256
- --pf-v5-c-icon__content--Color: var(--pf-v5-global--icon--Color--dark);
15227
+ --pf-v5-c-icon--m-inline--Width: 1em;
15228
+ --pf-v5-c-icon--m-inline--Height: 1em;
15229
+ --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
15230
+ --pf-v5-c-icon__content--Color: initial;
15257
15231
  --pf-v5-c-icon__content--m-danger--Color: var(--pf-v5-global--danger-color--100);
15258
15232
  --pf-v5-c-icon__content--m-warning--Color: var(--pf-v5-global--warning-color--100);
15259
15233
  --pf-v5-c-icon__content--m-success--Color: var(--pf-v5-global--success-color--100);
15260
15234
  --pf-v5-c-icon__content--m-info--Color: var(--pf-v5-global--info-color--100);
15261
15235
  --pf-v5-c-icon__content--m-custom--Color: var(--pf-v5-global--custom-color--100);
15262
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
15236
+ --pf-v5-c-icon--m-inline__content--Color: initial;
15237
+ --pf-v5-c-icon__content--FontSize: 1em;
15238
+ --pf-v5-c-icon--m-sm__content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
15239
+ --pf-v5-c-icon--m-md__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
15240
+ --pf-v5-c-icon--m-lg__content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
15241
+ --pf-v5-c-icon--m-xl__content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
15263
15242
  --pf-v5-c-icon--m-inline__content--FontSize: 1em;
15264
- --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
15265
- --pf-v5-c-icon--m-sm--content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
15266
- --pf-v5-c-icon--m-md--content--FontSize: var(--pf-v5-global--icon--FontSize--md);
15267
- --pf-v5-c-icon--m-lg--content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
15268
- --pf-v5-c-icon--m-xl--content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
15269
15243
  position: relative;
15270
15244
  display: inline-flex;
15271
15245
  align-items: center;
@@ -15277,7 +15251,7 @@ textarea.pf-v5-c-form-control {
15277
15251
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-inline--Width);
15278
15252
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-inline--Height);
15279
15253
  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-inline__content--FontSize);
15280
- --pf-v5-c-icon__content--Color: currentcolor;
15254
+ --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon--m-inline__content--Color);
15281
15255
  line-height: 1;
15282
15256
  }
15283
15257
  .pf-v5-c-icon.pf-m-inline .pf-v5-c-spinner {
@@ -15286,22 +15260,22 @@ textarea.pf-v5-c-form-control {
15286
15260
  .pf-v5-c-icon.pf-m-sm {
15287
15261
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-sm--Width);
15288
15262
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-sm--Height);
15289
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm--content--FontSize);
15263
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
15290
15264
  }
15291
15265
  .pf-v5-c-icon.pf-m-md {
15292
15266
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-md--Width);
15293
15267
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-md--Height);
15294
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md--content--FontSize);
15268
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
15295
15269
  }
15296
15270
  .pf-v5-c-icon.pf-m-lg {
15297
15271
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-lg--Width);
15298
15272
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-lg--Height);
15299
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg--content--FontSize);
15273
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
15300
15274
  }
15301
15275
  .pf-v5-c-icon.pf-m-xl {
15302
15276
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-xl--Width);
15303
15277
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-xl--Height);
15304
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl--content--FontSize);
15278
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
15305
15279
  }
15306
15280
  .pf-v5-c-icon.pf-m-in-progress {
15307
15281
  --pf-v5-c-icon__content--Opacity: 0;
@@ -15318,23 +15292,23 @@ textarea.pf-v5-c-form-control {
15318
15292
  }
15319
15293
  .pf-v5-c-icon__content.pf-m-sm,
15320
15294
  .pf-v5-c-icon__progress.pf-m-sm {
15321
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm--content--FontSize);
15295
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
15322
15296
  }
15323
15297
  .pf-v5-c-icon__content.pf-m-md,
15324
15298
  .pf-v5-c-icon__progress.pf-m-md {
15325
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md--content--FontSize);
15299
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
15326
15300
  }
15327
15301
  .pf-v5-c-icon__content.pf-m-lg,
15328
15302
  .pf-v5-c-icon__progress.pf-m-lg {
15329
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg--content--FontSize);
15303
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
15330
15304
  }
15331
15305
  .pf-v5-c-icon__content.pf-m-xl,
15332
15306
  .pf-v5-c-icon__progress.pf-m-xl {
15333
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl--content--FontSize);
15307
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
15334
15308
  }
15335
15309
 
15336
15310
  .pf-v5-c-icon__content {
15337
- color: var(--pf-v5-c-icon__content--Color);
15311
+ color: var(--pf-v5-c-icon__content--Color, inherit);
15338
15312
  opacity: var(--pf-v5-c-icon__content--Opacity, 1);
15339
15313
  }
15340
15314
  .pf-v5-c-icon__content.pf-m-danger {
package/patternfly.css CHANGED
@@ -276,8 +276,8 @@
276
276
  --pf-v5-global--BorderRadius--lg: 30em;
277
277
  --pf-v5-global--icon--Color--light: #6a6e73;
278
278
  --pf-v5-global--icon--Color--dark: #151515;
279
- --pf-v5-global--icon--FontSize--sm: 0.625rem;
280
- --pf-v5-global--icon--FontSize--md: 1.125rem;
279
+ --pf-v5-global--icon--FontSize--sm: 0.75rem;
280
+ --pf-v5-global--icon--FontSize--md: 1rem;
281
281
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
282
282
  --pf-v5-global--icon--FontSize--xl: 3.375rem;
283
283
  --pf-v5-global--FontFamily--sans-serif: "RedHatText", helvetica, arial, sans-serif;
@@ -5441,7 +5441,6 @@ button) {
5441
5441
 
5442
5442
  .pf-v5-c-about-modal-box {
5443
5443
  --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
5444
- --pf-v5-c-about-modal-box--BackgroundImage: url("./assets/images/pfbg-icon.svg");
5445
5444
  --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
5446
5445
  --pf-v5-c-about-modal-box--BackgroundSize--min-width: 200px;
5447
5446
  --pf-v5-c-about-modal-box--BackgroundSize--width: 60%;
@@ -5472,9 +5471,6 @@ button) {
5472
5471
  --pf-v5-c-about-modal-box__close--c-button--Height: calc(var(--pf-v5-c-about-modal-box__close--c-button--FontSize) * 2);
5473
5472
  --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-global--palette--black-1000);
5474
5473
  --pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor: rgba(3, 3, 3, 0.4);
5475
- --pf-v5-c-about-modal-box__hero--sm--BackgroundImage: url("./assets/images/pfbg_992@2x.jpg");
5476
- --pf-v5-c-about-modal-box__hero--sm--BackgroundPosition: top left;
5477
- --pf-v5-c-about-modal-box__hero--sm--BackgroundSize: cover;
5478
5474
  --pf-v5-c-about-modal-box__brand-image--Height: 2.5rem;
5479
5475
  --pf-v5-c-about-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--xl);
5480
5476
  --pf-v5-c-about-modal-box__header--PaddingBottom: var(--pf-v5-global--spacer--sm);
@@ -5502,7 +5498,7 @@ button) {
5502
5498
  overflow-x: hidden;
5503
5499
  overflow-y: auto;
5504
5500
  background-color: var(--pf-v5-c-about-modal-box--BackgroundColor);
5505
- background-image: var(--pf-v5-c-about-modal-box--BackgroundImage);
5501
+ background-image: var(--pf-v5-c-about-modal-box--BackgroundImage, none);
5506
5502
  background-repeat: no-repeat;
5507
5503
  background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
5508
5504
  background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
@@ -5639,21 +5635,6 @@ button) {
5639
5635
  --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor);
5640
5636
  }
5641
5637
 
5642
- .pf-v5-c-about-modal-box__hero {
5643
- display: none;
5644
- }
5645
- @media only screen and (min-width: 576px) {
5646
- .pf-v5-c-about-modal-box__hero {
5647
- display: block;
5648
- grid-area: hero;
5649
- background-image: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundImage);
5650
- background-repeat: no-repeat;
5651
- background-attachment: fixed;
5652
- background-position: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundPosition);
5653
- background-size: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundSize);
5654
- }
5655
- }
5656
-
5657
5638
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
5658
5639
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
5659
5640
  :where(.pf-v5-theme-dark) .pf-v5-c-page__header, :where(.pf-v5-theme-dark) .pf-v5-c-masthead, :where(.pf-v5-theme-dark) .pf-v5-c-login__header,
@@ -6728,7 +6709,6 @@ button) {
6728
6709
 
6729
6710
  .pf-v5-c-background-image {
6730
6711
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
6731
- --pf-v5-c-background-image--BackgroundImage: url("./assets/images/pfbg-icon.svg");
6732
6712
  --pf-v5-c-background-image--BackgroundPosition: bottom right;
6733
6713
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6734
6714
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
@@ -6741,7 +6721,7 @@ button) {
6741
6721
  width: 100%;
6742
6722
  height: 100%;
6743
6723
  background-color: var(--pf-v5-c-background-image--BackgroundColor);
6744
- background-image: var(--pf-v5-c-background-image--BackgroundImage);
6724
+ background-image: var(--pf-v5-c-background-image--BackgroundImage, none);
6745
6725
  background-repeat: no-repeat;
6746
6726
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
6747
6727
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
@@ -14952,13 +14932,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14952
14932
  --pf-v5-c-form-control--textarea--success--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
14953
14933
  --pf-v5-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
14954
14934
  --pf-v5-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
14955
- --pf-v5-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
14956
- --pf-v5-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#warning");
14957
- --pf-v5-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
14958
- --pf-v5-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
14959
- --pf-v5-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
14960
- --pf-v5-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
14961
- --pf-v5-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#clock");
14962
14935
  --pf-v5-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-v5-c-form-control--FontSize);
14963
14936
  --pf-v5-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-v5-global--spacer--md) + 7px);
14964
14937
  --pf-v5-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-v5-global--spacer--md) + 1px - var(--pf-v5-global--spacer--lg));
@@ -15358,31 +15331,32 @@ textarea.pf-v5-c-form-control {
15358
15331
  }
15359
15332
 
15360
15333
  .pf-v5-c-icon {
15361
- --pf-v5-c-icon--Width: var(--pf-v5-global--icon--FontSize--md);
15362
- --pf-v5-c-icon--Height: var(--pf-v5-global--icon--FontSize--md);
15363
- --pf-v5-c-icon--m-inline--Width: 1em;
15364
- --pf-v5-c-icon--m-inline--Height: 1em;
15334
+ --pf-v5-c-icon--Width: 1em;
15335
+ --pf-v5-c-icon--Height: 1em;
15365
15336
  --pf-v5-c-icon--m-sm--Width: var(--pf-v5-global--icon--FontSize--sm);
15366
- --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
15367
- --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
15368
- --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
15369
15337
  --pf-v5-c-icon--m-sm--Height: var(--pf-v5-global--icon--FontSize--sm);
15338
+ --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
15370
15339
  --pf-v5-c-icon--m-md--Height: var(--pf-v5-global--icon--FontSize--md);
15340
+ --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
15371
15341
  --pf-v5-c-icon--m-lg--Height: var(--pf-v5-global--icon--FontSize--lg);
15342
+ --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
15372
15343
  --pf-v5-c-icon--m-xl--Height: var(--pf-v5-global--icon--FontSize--xl);
15373
- --pf-v5-c-icon__content--Color: var(--pf-v5-global--icon--Color--dark);
15344
+ --pf-v5-c-icon--m-inline--Width: 1em;
15345
+ --pf-v5-c-icon--m-inline--Height: 1em;
15346
+ --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
15347
+ --pf-v5-c-icon__content--Color: initial;
15374
15348
  --pf-v5-c-icon__content--m-danger--Color: var(--pf-v5-global--danger-color--100);
15375
15349
  --pf-v5-c-icon__content--m-warning--Color: var(--pf-v5-global--warning-color--100);
15376
15350
  --pf-v5-c-icon__content--m-success--Color: var(--pf-v5-global--success-color--100);
15377
15351
  --pf-v5-c-icon__content--m-info--Color: var(--pf-v5-global--info-color--100);
15378
15352
  --pf-v5-c-icon__content--m-custom--Color: var(--pf-v5-global--custom-color--100);
15379
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
15353
+ --pf-v5-c-icon--m-inline__content--Color: initial;
15354
+ --pf-v5-c-icon__content--FontSize: 1em;
15355
+ --pf-v5-c-icon--m-sm__content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
15356
+ --pf-v5-c-icon--m-md__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
15357
+ --pf-v5-c-icon--m-lg__content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
15358
+ --pf-v5-c-icon--m-xl__content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
15380
15359
  --pf-v5-c-icon--m-inline__content--FontSize: 1em;
15381
- --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
15382
- --pf-v5-c-icon--m-sm--content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
15383
- --pf-v5-c-icon--m-md--content--FontSize: var(--pf-v5-global--icon--FontSize--md);
15384
- --pf-v5-c-icon--m-lg--content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
15385
- --pf-v5-c-icon--m-xl--content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
15386
15360
  position: relative;
15387
15361
  display: inline-flex;
15388
15362
  align-items: center;
@@ -15394,7 +15368,7 @@ textarea.pf-v5-c-form-control {
15394
15368
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-inline--Width);
15395
15369
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-inline--Height);
15396
15370
  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-inline__content--FontSize);
15397
- --pf-v5-c-icon__content--Color: currentcolor;
15371
+ --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon--m-inline__content--Color);
15398
15372
  line-height: 1;
15399
15373
  }
15400
15374
  .pf-v5-c-icon.pf-m-inline .pf-v5-c-spinner {
@@ -15403,22 +15377,22 @@ textarea.pf-v5-c-form-control {
15403
15377
  .pf-v5-c-icon.pf-m-sm {
15404
15378
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-sm--Width);
15405
15379
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-sm--Height);
15406
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm--content--FontSize);
15380
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
15407
15381
  }
15408
15382
  .pf-v5-c-icon.pf-m-md {
15409
15383
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-md--Width);
15410
15384
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-md--Height);
15411
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md--content--FontSize);
15385
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
15412
15386
  }
15413
15387
  .pf-v5-c-icon.pf-m-lg {
15414
15388
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-lg--Width);
15415
15389
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-lg--Height);
15416
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg--content--FontSize);
15390
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
15417
15391
  }
15418
15392
  .pf-v5-c-icon.pf-m-xl {
15419
15393
  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-xl--Width);
15420
15394
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-xl--Height);
15421
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl--content--FontSize);
15395
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
15422
15396
  }
15423
15397
  .pf-v5-c-icon.pf-m-in-progress {
15424
15398
  --pf-v5-c-icon__content--Opacity: 0;
@@ -15435,23 +15409,23 @@ textarea.pf-v5-c-form-control {
15435
15409
  }
15436
15410
  .pf-v5-c-icon__content.pf-m-sm,
15437
15411
  .pf-v5-c-icon__progress.pf-m-sm {
15438
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm--content--FontSize);
15412
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
15439
15413
  }
15440
15414
  .pf-v5-c-icon__content.pf-m-md,
15441
15415
  .pf-v5-c-icon__progress.pf-m-md {
15442
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md--content--FontSize);
15416
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
15443
15417
  }
15444
15418
  .pf-v5-c-icon__content.pf-m-lg,
15445
15419
  .pf-v5-c-icon__progress.pf-m-lg {
15446
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg--content--FontSize);
15420
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
15447
15421
  }
15448
15422
  .pf-v5-c-icon__content.pf-m-xl,
15449
15423
  .pf-v5-c-icon__progress.pf-m-xl {
15450
- --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl--content--FontSize);
15424
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
15451
15425
  }
15452
15426
 
15453
15427
  .pf-v5-c-icon__content {
15454
- color: var(--pf-v5-c-icon__content--Color);
15428
+ color: var(--pf-v5-c-icon__content--Color, inherit);
15455
15429
  opacity: var(--pf-v5-c-icon__content--Opacity, 1);
15456
15430
  }
15457
15431
  .pf-v5-c-icon__content.pf-m-danger {