@patternfly/patternfly 6.3.0-prerelease.53 → 6.3.0-prerelease.55

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 (72) hide show
  1. package/README.md +17 -11
  2. package/base/patternfly-variables.css +1208 -1
  3. package/base/patternfly-variables.scss +10 -0
  4. package/base/tokens/tokens-charts-dark.scss +1 -1
  5. package/base/tokens/tokens-charts.scss +1 -1
  6. package/base/tokens/tokens-dark.scss +13 -1
  7. package/base/tokens/tokens-default.scss +60 -2
  8. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  9. package/base/tokens/tokens-highcontrast.scss +703 -0
  10. package/base/tokens/tokens-local.scss +39 -0
  11. package/base/tokens/tokens-palette.scss +9 -1
  12. package/components/Accordion/accordion.css +21 -0
  13. package/components/Accordion/accordion.scss +27 -1
  14. package/components/Alert/alert-group.css +15 -2
  15. package/components/Alert/alert-group.scss +18 -2
  16. package/components/Badge/badge.css +2 -0
  17. package/components/Badge/badge.scss +2 -0
  18. package/components/Banner/banner.css +4 -0
  19. package/components/Banner/banner.scss +4 -0
  20. package/components/Button/button.css +32 -3
  21. package/components/Button/button.scss +34 -5
  22. package/components/Card/card.css +5 -3
  23. package/components/Card/card.scss +5 -3
  24. package/components/CodeBlock/code-block.css +3 -0
  25. package/components/CodeBlock/code-block.scss +3 -0
  26. package/components/CodeEditor/code-editor.css +8 -3
  27. package/components/CodeEditor/code-editor.scss +11 -6
  28. package/components/Drawer/drawer.css +44 -41
  29. package/components/Drawer/drawer.scss +42 -36
  30. package/components/DualListSelector/dual-list-selector.css +19 -1
  31. package/components/DualListSelector/dual-list-selector.scss +20 -1
  32. package/components/Label/label.css +20 -11
  33. package/components/Label/label.scss +21 -11
  34. package/components/Login/login.css +3 -0
  35. package/components/Login/login.scss +3 -0
  36. package/components/Menu/menu.css +11 -0
  37. package/components/Menu/menu.scss +12 -1
  38. package/components/MenuToggle/menu-toggle.css +12 -5
  39. package/components/MenuToggle/menu-toggle.scss +12 -5
  40. package/components/ModalBox/modal-box.css +3 -0
  41. package/components/ModalBox/modal-box.scss +3 -0
  42. package/components/Nav/nav.css +17 -0
  43. package/components/Nav/nav.scss +20 -0
  44. package/components/Page/page.css +62 -23
  45. package/components/Page/page.scss +42 -13
  46. package/components/Panel/panel.css +7 -1
  47. package/components/Panel/panel.scss +7 -1
  48. package/components/Popover/popover.css +4 -0
  49. package/components/Popover/popover.scss +4 -0
  50. package/components/Progress/progress.css +10 -0
  51. package/components/Progress/progress.scss +11 -0
  52. package/components/SimpleList/simple-list.css +15 -0
  53. package/components/SimpleList/simple-list.scss +17 -1
  54. package/components/Table/table.css +29 -0
  55. package/components/Table/table.scss +33 -0
  56. package/components/Tabs/tabs.css +7 -0
  57. package/components/Tabs/tabs.scss +8 -1
  58. package/components/TreeView/tree-view.css +15 -0
  59. package/components/TreeView/tree-view.scss +17 -0
  60. package/components/Wizard/wizard.css +22 -1
  61. package/components/Wizard/wizard.scss +25 -3
  62. package/components/_index.css +390 -94
  63. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  64. package/docs/components/Login/examples/Login.md +22 -22
  65. package/docs/components/Table/examples/Table.md +936 -1412
  66. package/package.json +3 -2
  67. package/patternfly-base-no-globals.css +1208 -1
  68. package/patternfly-base.css +1208 -1
  69. package/patternfly-no-globals.css +1598 -95
  70. package/patternfly.css +1598 -95
  71. package/patternfly.min.css +1 -1
  72. package/patternfly.min.css.map +1 -1
package/components/Wizard/wizard.scss CHANGED
@@ -58,6 +58,10 @@
58
58
  --#{$wizard}__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
59
59
  --#{$wizard}__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
60
60
  --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
61
+ --#{$wizard}__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
62
+ --#{$wizard}__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
63
+ --#{$wizard}__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
64
+ --#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
61
65
 
62
66
  // Nav link toggle icon
63
67
  --#{$wizard}__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -73,13 +77,17 @@
73
77
  --#{$wizard}__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
74
78
  --#{$wizard}__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
75
79
  --#{$wizard}__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
80
+ --#{$wizard}__nav-link--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
81
+ --#{$wizard}__nav-link--before--BorderWidth: var(--pf-t--global--border--width--regular);
76
82
  --#{$wizard}__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
77
83
  --#{$wizard}__nav-link--before--Color: var(--pf-t--global--text--color--regular);
78
84
  --#{$wizard}__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
79
85
  --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
80
86
  --#{$wizard}__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
87
+ --#{$wizard}__nav-link--m-current--before--BorderColor: transparent;
81
88
  --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent;
82
89
  --#{$wizard}__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
90
+ --#{$wizard}__nav-link--m-disabled--before--BorderColor: transparent;
83
91
 
84
92
  // Nav link status icon
85
93
  --#{$wizard}__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -472,18 +480,21 @@
472
480
 
473
481
  // Nav step number
474
482
  &::before {
475
- inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable
483
+ inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable
476
484
  content: counter(wizard-nav-count);
477
- }
485
+ border: var(--#{$wizard}__nav-link--before--BorderWidth) solid var(--#{$wizard}__nav-link--before--BorderColor);
486
+ }
478
487
 
479
488
  &.pf-m-current {
480
489
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-current--Color);
481
490
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--m-current--BackgroundColor);
491
+ --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth);
482
492
 
483
493
  @at-root .#{$wizard}__toggle-num,
484
494
  &::before {
485
495
  --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-current--before--BackgroundColor);
486
496
  --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-current--before--Color);
497
+ --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-current--before--BorderColor);
487
498
  }
488
499
  }
489
500
 
@@ -508,6 +519,7 @@
508
519
  &:where(:hover, :focus) {
509
520
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
510
521
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
522
+ --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--hover__nav-link-main--BorderWidth);
511
523
  }
512
524
 
513
525
  // override the button background/color for disabled nav links
@@ -521,11 +533,13 @@
521
533
  &::before {
522
534
  --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-disabled--before--BackgroundColor);
523
535
  --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-disabled--before--Color);
536
+ --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-disabled--before--BorderColor);
524
537
  }
525
538
  }
526
539
  }
527
540
 
528
541
  .#{$wizard}__nav-link-main {
542
+ position: relative;
529
543
  display: flex;
530
544
  flex-grow: 1;
531
545
  justify-content: space-between;
@@ -534,8 +548,16 @@
534
548
  padding-inline-start: var(--#{$wizard}__nav-link-main--PaddingInlineStart);
535
549
  padding-inline-end: var(--#{$wizard}__nav-link-main--PaddingInlineEnd);
536
550
  background-color: var(--#{$wizard}__nav-link-main--BackgroundColor);
537
- border: none;
538
551
  border-radius: var(--#{$wizard}__nav-link-main--BorderRadius);
552
+
553
+ &::after {
554
+ position: absolute;
555
+ inset: 0;
556
+ pointer-events: none;
557
+ content: "";
558
+ border: var(--#{$wizard}__nav-link-main--BorderWidth) solid var(--#{$wizard}__nav-link-main--BorderColor);
559
+ border-radius: inherit;
560
+ }
539
561
  }
540
562
 
541
563
  .#{$wizard}__nav-link-status-icon {