@patternfly/patternfly 6.0.0-alpha.75 → 6.0.0-alpha.77

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 (14) hide show
  1. package/components/Alert/alert.css +2 -0
  2. package/components/Alert/alert.scss +2 -0
  3. package/components/CodeBlock/code-block.css +4 -0
  4. package/components/CodeBlock/code-block.scss +4 -0
  5. package/components/CodeEditor/code-editor.css +91 -73
  6. package/components/CodeEditor/code-editor.scss +99 -82
  7. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +97 -77
  10. package/patternfly-theme-dark-unversioned.css +97 -77
  11. package/patternfly.css +97 -77
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -6746,6 +6746,7 @@ button) {
6746
6746
  --pf-v5-c-alert__icon--MarginTop: 0.25rem;
6747
6747
  --pf-v5-c-alert__icon--MarginRight: var(--pf-t--global--spacer--sm);
6748
6748
  --pf-v5-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
6749
+ --pf-v5-c-alert__title--FontFamily: var(--pf-t--global--font--family--heading);
6749
6750
  --pf-v5-c-alert__title--FontSize: var(--pf-t--global--font--size--heading--xs);
6750
6751
  --pf-v5-c-alert__title--FontWeight: var(--pf-t--global--font--weight--heading);
6751
6752
  --pf-v5-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
@@ -6882,6 +6883,7 @@ button) {
6882
6883
 
6883
6884
  .pf-v5-c-alert__title {
6884
6885
  grid-area: title;
6886
+ font-family: var(--pf-v5-c-alert__title--FontFamily);
6885
6887
  font-size: var(--pf-v5-c-alert__title--FontSize);
6886
6888
  font-weight: var(--pf-v5-c-alert__title--FontWeight);
6887
6889
  line-height: var(--pf-v5-c-alert__title--LineHeight);
@@ -9442,6 +9444,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9442
9444
  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
9443
9445
  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
9444
9446
  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
9447
+ --pf-v5-c-code-block__header--PaddingTop: var(--pf-t--global--spacer--xs);
9448
+ --pf-v5-c-code-block__header--PaddingBottom: var(--pf-t--global--spacer--xs);
9445
9449
  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
9446
9450
  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
9447
9451
  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -9459,6 +9463,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9459
9463
 
9460
9464
  .pf-v5-c-code-block__header {
9461
9465
  display: flex;
9466
+ padding-block-start: var(--pf-v5-c-code-block__header--PaddingTop);
9467
+ padding-block-end: var(--pf-v5-c-code-block__header--PaddingBottom);
9462
9468
  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
9463
9469
  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
9464
9470
  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
@@ -9487,42 +9493,58 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9487
9493
  font-family: var(--pf-v5-c-code-block__code--FontFamily, inherit);
9488
9494
  }
9489
9495
 
9490
- .pf-v5-c-code-editor {
9491
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-global--Color--200);
9492
- --pf-v5-c-code-editor__controls--c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
9493
- --pf-v5-c-code-editor__controls--c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
9494
- --pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
9495
- --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
9496
- --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
9497
- --pf-v5-c-code-editor__main--BorderColor: var(--pf-v5-global--BorderColor--100);
9498
- --pf-v5-c-code-editor__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
9499
- --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
9500
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--300);
9501
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
9502
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
9503
- --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
9496
+ :where(:root), :where(.pf-v5-c-code-editor) {
9497
+ --pf-v5-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9498
+ --pf-v5-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
9499
+ --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
9500
+ --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
9501
+ --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9502
+ --pf-v5-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9503
+ --pf-v5-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
9504
+ --pf-v5-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
9505
+ --pf-v5-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9506
+ --pf-v5-c-code-editor__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9507
+ --pf-v5-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
9508
+ --pf-v5-c-code-editor__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
9509
+ --pf-v5-c-code-editor__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9510
+ --pf-v5-c-code-editor__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
9511
+ --pf-v5-c-code-editor__upload--PaddingBlockEnd: var(--pf-t--global--spacer--md);
9512
+ --pf-v5-c-code-editor__upload--BorderRadius: var(--pf-t--global--border--radius--medium);
9513
+ --pf-v5-c-code-editor__main--BorderColor: var(--pf-t--global--border--color--default);
9514
+ --pf-v5-c-code-editor__main--BorderWidth: var(--pf-t--global--border--width--box--default);
9515
+ --pf-v5-c-code-editor__main--BorderEndStartRadius: var(--pf-t--global--border--radius--medium);
9516
+ --pf-v5-c-code-editor__main--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
9517
+ --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9518
+ --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9519
+ --pf-v5-c-code-editor__upload--before--BorderWidth: 0;
9520
+ --pf-v5-c-code-editor__upload--before--BorderColor: transparent;
9521
+ --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-t--global--border--width--divider--hover);
9522
+ --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
9523
+ --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9504
9524
  --pf-v5-c-code-editor__main--m-drag-hover--after--Opacity: .1;
9505
- --pf-v5-c-code-editor__code--PaddingTop: var(--pf-v5-global--spacer--sm);
9506
- --pf-v5-c-code-editor__code--PaddingRight: var(--pf-v5-global--spacer--sm);
9507
- --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-v5-global--spacer--sm);
9508
- --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-v5-global--spacer--sm);
9509
- --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-v5-global--FontSize--sm);
9510
- --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
9511
- --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-v5-global--spacer--sm);
9512
- --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-v5-global--spacer--sm);
9513
- --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
9514
- --pf-v5-c-code-editor__tab--Color: var(--pf-v5-global--Color--200);
9515
- --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-v5-global--spacer--form-element);
9516
- --pf-v5-c-code-editor__tab--PaddingRight: var(--pf-v5-global--spacer--sm);
9517
- --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-v5-global--spacer--form-element);
9518
- --pf-v5-c-code-editor__tab--PaddingLeft: var(--pf-v5-global--spacer--sm);
9519
- --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
9520
- --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
9525
+ --pf-v5-c-code-editor__code--PaddingTop: var(--pf-t--global--spacer--sm);
9526
+ --pf-v5-c-code-editor__code--PaddingRight: var(--pf-t--global--spacer--sm);
9527
+ --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-t--global--spacer--sm);
9528
+ --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-t--global--spacer--sm);
9529
+ --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-t--global--font--size--sm);
9530
+ --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
9531
+ --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
9532
+ --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
9533
+ --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9534
+ --pf-v5-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
9535
+ --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-t--global--spacer--sm);
9536
+ --pf-v5-c-code-editor__tab--PaddingRight: var( --pf-t--global--spacer--sm);
9537
+ --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
9538
+ --pf-v5-c-code-editor__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
9539
+ --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
9540
+ --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
9521
9541
  --pf-v5-c-code-editor__tab--BorderBottomWidth: 0;
9522
- --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
9523
- --pf-v5-c-code-editor__tab--BorderColor: var(--pf-v5-global--BorderColor--100);
9524
- --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
9542
+ --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
9543
+ --pf-v5-c-code-editor__tab--BorderColor: var(--pf-t--global--border--color--default);
9544
+ --pf-v5-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
9545
+ --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
9525
9546
  }
9547
+
9526
9548
  .pf-v5-c-code-editor.pf-m-read-only {
9527
9549
  --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-c-code-editor--m-read-only__main--BackgroundColor);
9528
9550
  }
@@ -9530,7 +9552,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9530
9552
  .pf-v5-c-code-editor__header {
9531
9553
  position: relative;
9532
9554
  display: flex;
9533
- align-items: flex-end;
9534
9555
  }
9535
9556
  .pf-v5-c-code-editor__header::before {
9536
9557
  position: absolute;
@@ -9541,54 +9562,65 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9541
9562
  content: "";
9542
9563
  border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
9543
9564
  }
9565
+ .pf-v5-c-code-editor__header.pf-m-plain {
9566
+ --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-v5-c-code-editor__header-content--m-plain--BackgroundColor);
9567
+ }
9544
9568
 
9545
- .pf-v5-c-code-editor__controls {
9569
+ .pf-v5-c-code-editor__header-content {
9546
9570
  display: flex;
9571
+ flex: 1;
9572
+ align-items: flex-end;
9573
+ padding-block-start: var(--pf-v5-c-code-editor__header-content--PaddingBlockStart);
9574
+ padding-block-end: var(--pf-v5-c-code-editor__header-content--PaddingBlockEnd);
9575
+ padding-inline-start: var(--pf-v5-c-code-editor__header-content--PaddingInlineStart);
9576
+ padding-inline-end: var(--pf-v5-c-code-editor__header-content--PaddingInlineEnd);
9577
+ background-color: var(--pf-v5-c-code-editor__header-content--BackgroundColor);
9578
+ border-start-start-radius: var(--pf-v5-c-code-editor__header-content--BorderStartStartRadius);
9547
9579
  }
9548
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control {
9549
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--Color);
9550
- }
9551
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:hover {
9552
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color);
9553
- }
9554
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus {
9555
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
9556
- }
9557
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
9558
- border-block-end-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
9580
+
9581
+ .pf-v5-c-code-editor__controls {
9582
+ display: flex;
9583
+ gap: var(--pf-v5-c-code-editor__controls--Gap);
9584
+ align-items: flex-start;
9559
9585
  }
9560
9586
 
9561
9587
  .pf-v5-c-code-editor__header-main {
9562
9588
  flex-grow: 1;
9589
+ align-self: center;
9563
9590
  padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
9564
9591
  padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
9565
9592
  }
9566
9593
 
9594
+ .pf-v5-c-code-editor__upload {
9595
+ position: relative;
9596
+ padding-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
9597
+ padding-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
9598
+ padding-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
9599
+ padding-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
9600
+ }
9601
+ .pf-v5-c-code-editor__upload::before {
9602
+ position: absolute;
9603
+ inset-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
9604
+ inset-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
9605
+ inset-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
9606
+ inset-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
9607
+ content: "";
9608
+ border: var(--pf-v5-c-code-editor__upload--before--BorderWidth) dashed var(--pf-v5-c-code-editor__upload--before--BorderColor);
9609
+ border-radius: var(--pf-v5-c-code-editor__upload--BorderRadius);
9610
+ }
9611
+
9567
9612
  .pf-v5-c-code-editor__main {
9568
9613
  position: relative;
9569
9614
  color: var(--pf-v5-c-code-editor__main--Color, inherit);
9570
9615
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
9571
9616
  border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
9572
9617
  border-color: var(--pf-v5-c-code-editor__main--BorderColor);
9618
+ border-end-start-radius: var(--pf-v5-c-code-editor__main--BorderEndStartRadius);
9619
+ border-end-end-radius: var(--pf-v5-c-code-editor__main--BorderEndEndRadius);
9573
9620
  }
9574
- .pf-v5-c-code-editor__main.pf-m-drag-hover::after {
9575
- position: absolute;
9576
- inset-block-start: 0;
9577
- inset-block-end: 0;
9578
- inset-inline-start: 0;
9579
- inset-inline-end: 0;
9580
- content: "";
9581
- background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
9582
- opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
9583
- }
9584
- .pf-v5-c-code-editor__main.pf-m-drag-hover::before {
9585
- position: absolute;
9586
- inset-block-start: 0;
9587
- inset-block-end: 0;
9588
- inset-inline-start: 0;
9589
- inset-inline-end: 0;
9590
- content: "";
9591
- border: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
9621
+ .pf-v5-c-code-editor__main.pf-m-drag-hover {
9622
+ --pf-v5-c-code-editor__upload--before--BorderWidth: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth);
9623
+ --pf-v5-c-code-editor__upload--before--BorderColor: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
9592
9624
  }
9593
9625
  .pf-v5-c-code-editor__main .monaco-editor {
9594
9626
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
@@ -9619,7 +9651,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9619
9651
  padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
9620
9652
  padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
9621
9653
  padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
9622
- margin-inline-start: auto;
9623
9654
  color: var(--pf-v5-c-code-editor__tab--Color);
9624
9655
  background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
9625
9656
  border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
@@ -9628,24 +9659,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9628
9659
  border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
9629
9660
  border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
9630
9661
  border-inline-end-width: var(--pf-v5-c-code-editor__tab--BorderRightWidth);
9662
+ border-start-end-radius: var(--pf-v5-c-code-editor__tab--BorderStartEndRadius);
9631
9663
  }
9632
9664
 
9633
9665
  .pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
9634
9666
  margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
9635
9667
  }
9636
9668
 
9637
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
9638
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
9639
- }
9640
-
9641
- :where(.pf-theme-dark) .pf-v5-c-code-editor {
9642
- --pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
9643
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
9644
- }
9645
- :where(.pf-theme-dark) .pf-v5-c-code-editor__controls > * + * {
9646
- border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
9647
- }
9648
-
9649
9669
  .pf-v5-c-content {
9650
9670
  --pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
9651
9671
  --pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
package/patternfly.css CHANGED
@@ -6746,6 +6746,7 @@ button) {
6746
6746
  --pf-v5-c-alert__icon--MarginTop: 0.25rem;
6747
6747
  --pf-v5-c-alert__icon--MarginRight: var(--pf-t--global--spacer--sm);
6748
6748
  --pf-v5-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
6749
+ --pf-v5-c-alert__title--FontFamily: var(--pf-t--global--font--family--heading);
6749
6750
  --pf-v5-c-alert__title--FontSize: var(--pf-t--global--font--size--heading--xs);
6750
6751
  --pf-v5-c-alert__title--FontWeight: var(--pf-t--global--font--weight--heading);
6751
6752
  --pf-v5-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
@@ -6882,6 +6883,7 @@ button) {
6882
6883
 
6883
6884
  .pf-v5-c-alert__title {
6884
6885
  grid-area: title;
6886
+ font-family: var(--pf-v5-c-alert__title--FontFamily);
6885
6887
  font-size: var(--pf-v5-c-alert__title--FontSize);
6886
6888
  font-weight: var(--pf-v5-c-alert__title--FontWeight);
6887
6889
  line-height: var(--pf-v5-c-alert__title--LineHeight);
@@ -9442,6 +9444,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9442
9444
  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
9443
9445
  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
9444
9446
  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
9447
+ --pf-v5-c-code-block__header--PaddingTop: var(--pf-t--global--spacer--xs);
9448
+ --pf-v5-c-code-block__header--PaddingBottom: var(--pf-t--global--spacer--xs);
9445
9449
  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
9446
9450
  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
9447
9451
  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -9459,6 +9463,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9459
9463
 
9460
9464
  .pf-v5-c-code-block__header {
9461
9465
  display: flex;
9466
+ padding-block-start: var(--pf-v5-c-code-block__header--PaddingTop);
9467
+ padding-block-end: var(--pf-v5-c-code-block__header--PaddingBottom);
9462
9468
  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
9463
9469
  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
9464
9470
  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
@@ -9487,42 +9493,58 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9487
9493
  font-family: var(--pf-v5-c-code-block__code--FontFamily, inherit);
9488
9494
  }
9489
9495
 
9490
- .pf-v5-c-code-editor {
9491
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-global--Color--200);
9492
- --pf-v5-c-code-editor__controls--c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
9493
- --pf-v5-c-code-editor__controls--c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
9494
- --pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
9495
- --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
9496
- --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
9497
- --pf-v5-c-code-editor__main--BorderColor: var(--pf-v5-global--BorderColor--100);
9498
- --pf-v5-c-code-editor__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
9499
- --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
9500
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--300);
9501
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
9502
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
9503
- --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
9496
+ :where(:root), :where(.pf-v5-c-code-editor) {
9497
+ --pf-v5-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9498
+ --pf-v5-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
9499
+ --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
9500
+ --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
9501
+ --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9502
+ --pf-v5-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9503
+ --pf-v5-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
9504
+ --pf-v5-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
9505
+ --pf-v5-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9506
+ --pf-v5-c-code-editor__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9507
+ --pf-v5-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
9508
+ --pf-v5-c-code-editor__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
9509
+ --pf-v5-c-code-editor__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9510
+ --pf-v5-c-code-editor__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
9511
+ --pf-v5-c-code-editor__upload--PaddingBlockEnd: var(--pf-t--global--spacer--md);
9512
+ --pf-v5-c-code-editor__upload--BorderRadius: var(--pf-t--global--border--radius--medium);
9513
+ --pf-v5-c-code-editor__main--BorderColor: var(--pf-t--global--border--color--default);
9514
+ --pf-v5-c-code-editor__main--BorderWidth: var(--pf-t--global--border--width--box--default);
9515
+ --pf-v5-c-code-editor__main--BorderEndStartRadius: var(--pf-t--global--border--radius--medium);
9516
+ --pf-v5-c-code-editor__main--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
9517
+ --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9518
+ --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9519
+ --pf-v5-c-code-editor__upload--before--BorderWidth: 0;
9520
+ --pf-v5-c-code-editor__upload--before--BorderColor: transparent;
9521
+ --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-t--global--border--width--divider--hover);
9522
+ --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
9523
+ --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9504
9524
  --pf-v5-c-code-editor__main--m-drag-hover--after--Opacity: .1;
9505
- --pf-v5-c-code-editor__code--PaddingTop: var(--pf-v5-global--spacer--sm);
9506
- --pf-v5-c-code-editor__code--PaddingRight: var(--pf-v5-global--spacer--sm);
9507
- --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-v5-global--spacer--sm);
9508
- --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-v5-global--spacer--sm);
9509
- --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-v5-global--FontSize--sm);
9510
- --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
9511
- --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-v5-global--spacer--sm);
9512
- --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-v5-global--spacer--sm);
9513
- --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
9514
- --pf-v5-c-code-editor__tab--Color: var(--pf-v5-global--Color--200);
9515
- --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-v5-global--spacer--form-element);
9516
- --pf-v5-c-code-editor__tab--PaddingRight: var(--pf-v5-global--spacer--sm);
9517
- --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-v5-global--spacer--form-element);
9518
- --pf-v5-c-code-editor__tab--PaddingLeft: var(--pf-v5-global--spacer--sm);
9519
- --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
9520
- --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
9525
+ --pf-v5-c-code-editor__code--PaddingTop: var(--pf-t--global--spacer--sm);
9526
+ --pf-v5-c-code-editor__code--PaddingRight: var(--pf-t--global--spacer--sm);
9527
+ --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-t--global--spacer--sm);
9528
+ --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-t--global--spacer--sm);
9529
+ --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-t--global--font--size--sm);
9530
+ --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
9531
+ --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
9532
+ --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
9533
+ --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9534
+ --pf-v5-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
9535
+ --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-t--global--spacer--sm);
9536
+ --pf-v5-c-code-editor__tab--PaddingRight: var( --pf-t--global--spacer--sm);
9537
+ --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
9538
+ --pf-v5-c-code-editor__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
9539
+ --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
9540
+ --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
9521
9541
  --pf-v5-c-code-editor__tab--BorderBottomWidth: 0;
9522
- --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
9523
- --pf-v5-c-code-editor__tab--BorderColor: var(--pf-v5-global--BorderColor--100);
9524
- --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
9542
+ --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
9543
+ --pf-v5-c-code-editor__tab--BorderColor: var(--pf-t--global--border--color--default);
9544
+ --pf-v5-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
9545
+ --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
9525
9546
  }
9547
+
9526
9548
  .pf-v5-c-code-editor.pf-m-read-only {
9527
9549
  --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-c-code-editor--m-read-only__main--BackgroundColor);
9528
9550
  }
@@ -9530,7 +9552,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9530
9552
  .pf-v5-c-code-editor__header {
9531
9553
  position: relative;
9532
9554
  display: flex;
9533
- align-items: flex-end;
9534
9555
  }
9535
9556
  .pf-v5-c-code-editor__header::before {
9536
9557
  position: absolute;
@@ -9541,54 +9562,65 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9541
9562
  content: "";
9542
9563
  border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
9543
9564
  }
9565
+ .pf-v5-c-code-editor__header.pf-m-plain {
9566
+ --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-v5-c-code-editor__header-content--m-plain--BackgroundColor);
9567
+ }
9544
9568
 
9545
- .pf-v5-c-code-editor__controls {
9569
+ .pf-v5-c-code-editor__header-content {
9546
9570
  display: flex;
9571
+ flex: 1;
9572
+ align-items: flex-end;
9573
+ padding-block-start: var(--pf-v5-c-code-editor__header-content--PaddingBlockStart);
9574
+ padding-block-end: var(--pf-v5-c-code-editor__header-content--PaddingBlockEnd);
9575
+ padding-inline-start: var(--pf-v5-c-code-editor__header-content--PaddingInlineStart);
9576
+ padding-inline-end: var(--pf-v5-c-code-editor__header-content--PaddingInlineEnd);
9577
+ background-color: var(--pf-v5-c-code-editor__header-content--BackgroundColor);
9578
+ border-start-start-radius: var(--pf-v5-c-code-editor__header-content--BorderStartStartRadius);
9547
9579
  }
9548
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control {
9549
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--Color);
9550
- }
9551
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:hover {
9552
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color);
9553
- }
9554
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus {
9555
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
9556
- }
9557
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
9558
- border-block-end-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
9580
+
9581
+ .pf-v5-c-code-editor__controls {
9582
+ display: flex;
9583
+ gap: var(--pf-v5-c-code-editor__controls--Gap);
9584
+ align-items: flex-start;
9559
9585
  }
9560
9586
 
9561
9587
  .pf-v5-c-code-editor__header-main {
9562
9588
  flex-grow: 1;
9589
+ align-self: center;
9563
9590
  padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
9564
9591
  padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
9565
9592
  }
9566
9593
 
9594
+ .pf-v5-c-code-editor__upload {
9595
+ position: relative;
9596
+ padding-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
9597
+ padding-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
9598
+ padding-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
9599
+ padding-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
9600
+ }
9601
+ .pf-v5-c-code-editor__upload::before {
9602
+ position: absolute;
9603
+ inset-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
9604
+ inset-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
9605
+ inset-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
9606
+ inset-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
9607
+ content: "";
9608
+ border: var(--pf-v5-c-code-editor__upload--before--BorderWidth) dashed var(--pf-v5-c-code-editor__upload--before--BorderColor);
9609
+ border-radius: var(--pf-v5-c-code-editor__upload--BorderRadius);
9610
+ }
9611
+
9567
9612
  .pf-v5-c-code-editor__main {
9568
9613
  position: relative;
9569
9614
  color: var(--pf-v5-c-code-editor__main--Color, inherit);
9570
9615
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
9571
9616
  border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
9572
9617
  border-color: var(--pf-v5-c-code-editor__main--BorderColor);
9618
+ border-end-start-radius: var(--pf-v5-c-code-editor__main--BorderEndStartRadius);
9619
+ border-end-end-radius: var(--pf-v5-c-code-editor__main--BorderEndEndRadius);
9573
9620
  }
9574
- .pf-v5-c-code-editor__main.pf-m-drag-hover::after {
9575
- position: absolute;
9576
- inset-block-start: 0;
9577
- inset-block-end: 0;
9578
- inset-inline-start: 0;
9579
- inset-inline-end: 0;
9580
- content: "";
9581
- background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
9582
- opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
9583
- }
9584
- .pf-v5-c-code-editor__main.pf-m-drag-hover::before {
9585
- position: absolute;
9586
- inset-block-start: 0;
9587
- inset-block-end: 0;
9588
- inset-inline-start: 0;
9589
- inset-inline-end: 0;
9590
- content: "";
9591
- border: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
9621
+ .pf-v5-c-code-editor__main.pf-m-drag-hover {
9622
+ --pf-v5-c-code-editor__upload--before--BorderWidth: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth);
9623
+ --pf-v5-c-code-editor__upload--before--BorderColor: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
9592
9624
  }
9593
9625
  .pf-v5-c-code-editor__main .monaco-editor {
9594
9626
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
@@ -9619,7 +9651,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9619
9651
  padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
9620
9652
  padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
9621
9653
  padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
9622
- margin-inline-start: auto;
9623
9654
  color: var(--pf-v5-c-code-editor__tab--Color);
9624
9655
  background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
9625
9656
  border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
@@ -9628,24 +9659,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9628
9659
  border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
9629
9660
  border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
9630
9661
  border-inline-end-width: var(--pf-v5-c-code-editor__tab--BorderRightWidth);
9662
+ border-start-end-radius: var(--pf-v5-c-code-editor__tab--BorderStartEndRadius);
9631
9663
  }
9632
9664
 
9633
9665
  .pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
9634
9666
  margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
9635
9667
  }
9636
9668
 
9637
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
9638
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
9639
- }
9640
-
9641
- :where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
9642
- --pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
9643
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
9644
- }
9645
- :where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
9646
- border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
9647
- }
9648
-
9649
9669
  .pf-v5-c-content {
9650
9670
  --pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
9651
9671
  --pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);