@patternfly/patternfly 6.0.0-alpha.76 → 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 (12) hide show
  1. package/components/CodeBlock/code-block.css +4 -0
  2. package/components/CodeBlock/code-block.scss +4 -0
  3. package/components/CodeEditor/code-editor.css +91 -73
  4. package/components/CodeEditor/code-editor.scss +99 -82
  5. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +95 -77
  8. package/patternfly-theme-dark-unversioned.css +95 -77
  9. package/patternfly.css +95 -77
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -9444,6 +9444,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9444
9444
  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
9445
9445
  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
9446
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);
9447
9449
  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
9448
9450
  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
9449
9451
  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -9461,6 +9463,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9461
9463
 
9462
9464
  .pf-v5-c-code-block__header {
9463
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);
9464
9468
  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
9465
9469
  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
9466
9470
  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
@@ -9489,42 +9493,58 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9489
9493
  font-family: var(--pf-v5-c-code-block__code--FontFamily, inherit);
9490
9494
  }
9491
9495
 
9492
- .pf-v5-c-code-editor {
9493
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-global--Color--200);
9494
- --pf-v5-c-code-editor__controls--c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
9495
- --pf-v5-c-code-editor__controls--c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
9496
- --pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
9497
- --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
9498
- --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
9499
- --pf-v5-c-code-editor__main--BorderColor: var(--pf-v5-global--BorderColor--100);
9500
- --pf-v5-c-code-editor__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
9501
- --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
9502
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--300);
9503
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
9504
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
9505
- --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);
9506
9524
  --pf-v5-c-code-editor__main--m-drag-hover--after--Opacity: .1;
9507
- --pf-v5-c-code-editor__code--PaddingTop: var(--pf-v5-global--spacer--sm);
9508
- --pf-v5-c-code-editor__code--PaddingRight: var(--pf-v5-global--spacer--sm);
9509
- --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-v5-global--spacer--sm);
9510
- --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-v5-global--spacer--sm);
9511
- --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-v5-global--FontSize--sm);
9512
- --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
9513
- --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-v5-global--spacer--sm);
9514
- --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-v5-global--spacer--sm);
9515
- --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
9516
- --pf-v5-c-code-editor__tab--Color: var(--pf-v5-global--Color--200);
9517
- --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-v5-global--spacer--form-element);
9518
- --pf-v5-c-code-editor__tab--PaddingRight: var(--pf-v5-global--spacer--sm);
9519
- --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-v5-global--spacer--form-element);
9520
- --pf-v5-c-code-editor__tab--PaddingLeft: var(--pf-v5-global--spacer--sm);
9521
- --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
9522
- --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);
9523
9541
  --pf-v5-c-code-editor__tab--BorderBottomWidth: 0;
9524
- --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
9525
- --pf-v5-c-code-editor__tab--BorderColor: var(--pf-v5-global--BorderColor--100);
9526
- --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);
9527
9546
  }
9547
+
9528
9548
  .pf-v5-c-code-editor.pf-m-read-only {
9529
9549
  --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-c-code-editor--m-read-only__main--BackgroundColor);
9530
9550
  }
@@ -9532,7 +9552,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9532
9552
  .pf-v5-c-code-editor__header {
9533
9553
  position: relative;
9534
9554
  display: flex;
9535
- align-items: flex-end;
9536
9555
  }
9537
9556
  .pf-v5-c-code-editor__header::before {
9538
9557
  position: absolute;
@@ -9543,54 +9562,65 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9543
9562
  content: "";
9544
9563
  border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
9545
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
+ }
9546
9568
 
9547
- .pf-v5-c-code-editor__controls {
9569
+ .pf-v5-c-code-editor__header-content {
9548
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);
9549
9579
  }
9550
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control {
9551
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--Color);
9552
- }
9553
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:hover {
9554
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color);
9555
- }
9556
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus {
9557
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
9558
- }
9559
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
9560
- 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;
9561
9585
  }
9562
9586
 
9563
9587
  .pf-v5-c-code-editor__header-main {
9564
9588
  flex-grow: 1;
9589
+ align-self: center;
9565
9590
  padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
9566
9591
  padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
9567
9592
  }
9568
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
+
9569
9612
  .pf-v5-c-code-editor__main {
9570
9613
  position: relative;
9571
9614
  color: var(--pf-v5-c-code-editor__main--Color, inherit);
9572
9615
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
9573
9616
  border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
9574
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);
9575
9620
  }
9576
- .pf-v5-c-code-editor__main.pf-m-drag-hover::after {
9577
- position: absolute;
9578
- inset-block-start: 0;
9579
- inset-block-end: 0;
9580
- inset-inline-start: 0;
9581
- inset-inline-end: 0;
9582
- content: "";
9583
- background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
9584
- opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
9585
- }
9586
- .pf-v5-c-code-editor__main.pf-m-drag-hover::before {
9587
- position: absolute;
9588
- inset-block-start: 0;
9589
- inset-block-end: 0;
9590
- inset-inline-start: 0;
9591
- inset-inline-end: 0;
9592
- content: "";
9593
- 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);
9594
9624
  }
9595
9625
  .pf-v5-c-code-editor__main .monaco-editor {
9596
9626
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
@@ -9621,7 +9651,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9621
9651
  padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
9622
9652
  padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
9623
9653
  padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
9624
- margin-inline-start: auto;
9625
9654
  color: var(--pf-v5-c-code-editor__tab--Color);
9626
9655
  background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
9627
9656
  border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
@@ -9630,24 +9659,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9630
9659
  border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
9631
9660
  border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
9632
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);
9633
9663
  }
9634
9664
 
9635
9665
  .pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
9636
9666
  margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
9637
9667
  }
9638
9668
 
9639
- :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 {
9640
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
9641
- }
9642
-
9643
- :where(.pf-theme-dark) .pf-v5-c-code-editor {
9644
- --pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
9645
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
9646
- }
9647
- :where(.pf-theme-dark) .pf-v5-c-code-editor__controls > * + * {
9648
- border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
9649
- }
9650
-
9651
9669
  .pf-v5-c-content {
9652
9670
  --pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
9653
9671
  --pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
package/patternfly.css CHANGED
@@ -9444,6 +9444,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9444
9444
  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
9445
9445
  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
9446
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);
9447
9449
  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
9448
9450
  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
9449
9451
  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -9461,6 +9463,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9461
9463
 
9462
9464
  .pf-v5-c-code-block__header {
9463
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);
9464
9468
  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
9465
9469
  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
9466
9470
  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
@@ -9489,42 +9493,58 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9489
9493
  font-family: var(--pf-v5-c-code-block__code--FontFamily, inherit);
9490
9494
  }
9491
9495
 
9492
- .pf-v5-c-code-editor {
9493
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-global--Color--200);
9494
- --pf-v5-c-code-editor__controls--c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
9495
- --pf-v5-c-code-editor__controls--c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
9496
- --pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
9497
- --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
9498
- --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
9499
- --pf-v5-c-code-editor__main--BorderColor: var(--pf-v5-global--BorderColor--100);
9500
- --pf-v5-c-code-editor__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
9501
- --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
9502
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--300);
9503
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
9504
- --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
9505
- --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);
9506
9524
  --pf-v5-c-code-editor__main--m-drag-hover--after--Opacity: .1;
9507
- --pf-v5-c-code-editor__code--PaddingTop: var(--pf-v5-global--spacer--sm);
9508
- --pf-v5-c-code-editor__code--PaddingRight: var(--pf-v5-global--spacer--sm);
9509
- --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-v5-global--spacer--sm);
9510
- --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-v5-global--spacer--sm);
9511
- --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-v5-global--FontSize--sm);
9512
- --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
9513
- --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-v5-global--spacer--sm);
9514
- --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-v5-global--spacer--sm);
9515
- --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
9516
- --pf-v5-c-code-editor__tab--Color: var(--pf-v5-global--Color--200);
9517
- --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-v5-global--spacer--form-element);
9518
- --pf-v5-c-code-editor__tab--PaddingRight: var(--pf-v5-global--spacer--sm);
9519
- --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-v5-global--spacer--form-element);
9520
- --pf-v5-c-code-editor__tab--PaddingLeft: var(--pf-v5-global--spacer--sm);
9521
- --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
9522
- --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);
9523
9541
  --pf-v5-c-code-editor__tab--BorderBottomWidth: 0;
9524
- --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
9525
- --pf-v5-c-code-editor__tab--BorderColor: var(--pf-v5-global--BorderColor--100);
9526
- --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);
9527
9546
  }
9547
+
9528
9548
  .pf-v5-c-code-editor.pf-m-read-only {
9529
9549
  --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-c-code-editor--m-read-only__main--BackgroundColor);
9530
9550
  }
@@ -9532,7 +9552,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9532
9552
  .pf-v5-c-code-editor__header {
9533
9553
  position: relative;
9534
9554
  display: flex;
9535
- align-items: flex-end;
9536
9555
  }
9537
9556
  .pf-v5-c-code-editor__header::before {
9538
9557
  position: absolute;
@@ -9543,54 +9562,65 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9543
9562
  content: "";
9544
9563
  border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
9545
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
+ }
9546
9568
 
9547
- .pf-v5-c-code-editor__controls {
9569
+ .pf-v5-c-code-editor__header-content {
9548
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);
9549
9579
  }
9550
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control {
9551
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--Color);
9552
- }
9553
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:hover {
9554
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color);
9555
- }
9556
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus {
9557
- --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
9558
- }
9559
- .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
9560
- 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;
9561
9585
  }
9562
9586
 
9563
9587
  .pf-v5-c-code-editor__header-main {
9564
9588
  flex-grow: 1;
9589
+ align-self: center;
9565
9590
  padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
9566
9591
  padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
9567
9592
  }
9568
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
+
9569
9612
  .pf-v5-c-code-editor__main {
9570
9613
  position: relative;
9571
9614
  color: var(--pf-v5-c-code-editor__main--Color, inherit);
9572
9615
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
9573
9616
  border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
9574
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);
9575
9620
  }
9576
- .pf-v5-c-code-editor__main.pf-m-drag-hover::after {
9577
- position: absolute;
9578
- inset-block-start: 0;
9579
- inset-block-end: 0;
9580
- inset-inline-start: 0;
9581
- inset-inline-end: 0;
9582
- content: "";
9583
- background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
9584
- opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
9585
- }
9586
- .pf-v5-c-code-editor__main.pf-m-drag-hover::before {
9587
- position: absolute;
9588
- inset-block-start: 0;
9589
- inset-block-end: 0;
9590
- inset-inline-start: 0;
9591
- inset-inline-end: 0;
9592
- content: "";
9593
- 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);
9594
9624
  }
9595
9625
  .pf-v5-c-code-editor__main .monaco-editor {
9596
9626
  background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
@@ -9621,7 +9651,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9621
9651
  padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
9622
9652
  padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
9623
9653
  padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
9624
- margin-inline-start: auto;
9625
9654
  color: var(--pf-v5-c-code-editor__tab--Color);
9626
9655
  background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
9627
9656
  border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
@@ -9630,24 +9659,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9630
9659
  border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
9631
9660
  border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
9632
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);
9633
9663
  }
9634
9664
 
9635
9665
  .pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
9636
9666
  margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
9637
9667
  }
9638
9668
 
9639
- :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 {
9640
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
9641
- }
9642
-
9643
- :where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
9644
- --pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
9645
- --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
9646
- }
9647
- :where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
9648
- border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
9649
- }
9650
-
9651
9669
  .pf-v5-c-content {
9652
9670
  --pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
9653
9671
  --pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);