@patternfly/patternfly 6.5.0-prerelease.53 → 6.5.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 (87) hide show
  1. package/assets/images/compass--hero-bg.png +0 -0
  2. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  3. package/assets/images/compass--wallpaper-light.jpg +0 -0
  4. package/assets/images/glass-brand-dark.jpg +0 -0
  5. package/assets/images/glass-brand-dark.png +0 -0
  6. package/assets/images/glass-brand-light.jpg +0 -0
  7. package/assets/images/glass-brand-light.png +0 -0
  8. package/base/patternfly-variables.css +4238 -784
  9. package/base/patternfly-variables.scss +23 -21
  10. package/base/tokens/tokens-dark.scss +17 -17
  11. package/base/tokens/tokens-default.scss +18 -16
  12. package/base/tokens/tokens-glass-dark.scss +21 -4
  13. package/base/tokens/tokens-glass.scss +17 -4
  14. package/base/tokens/tokens-local.scss +4 -3
  15. package/base/tokens/tokens-palette.scss +1 -1
  16. package/base/tokens/tokens-redhat-dark.scss +432 -2
  17. package/base/tokens/tokens-redhat-glass-dark.scss +432 -4
  18. package/base/tokens/tokens-redhat-glass.scss +748 -4
  19. package/base/tokens/tokens-redhat-highcontrast-dark.scss +400 -3
  20. package/base/tokens/tokens-redhat-highcontrast.scss +635 -3
  21. package/base/tokens/tokens-redhat.scss +786 -2
  22. package/components/Accordion/accordion.css +10 -0
  23. package/components/Accordion/accordion.scss +11 -0
  24. package/components/Button/button.css +0 -14
  25. package/components/Button/button.scss +1 -16
  26. package/components/Card/card.css +13 -0
  27. package/components/Card/card.scss +20 -0
  28. package/components/Compass/compass.css +6 -6
  29. package/components/Compass/compass.scss +6 -6
  30. package/components/DataList/data-list.css +1 -1
  31. package/components/DataList/data-list.scss +1 -0
  32. package/components/Drawer/drawer.css +11 -6
  33. package/components/Drawer/drawer.scss +24 -11
  34. package/components/Login/login.css +7 -3
  35. package/components/Login/login.scss +7 -3
  36. package/components/Masthead/masthead.css +11 -3
  37. package/components/Masthead/masthead.scss +14 -4
  38. package/components/MenuToggle/menu-toggle.scss +1 -1
  39. package/components/Nav/nav.scss +1 -1
  40. package/components/Page/page.css +115 -8
  41. package/components/Page/page.scss +123 -11
  42. package/components/Panel/panel.css +14 -0
  43. package/components/Panel/panel.scss +18 -0
  44. package/components/Table/table-grid.css +4 -4
  45. package/components/Table/table-grid.scss +4 -4
  46. package/components/Table/table.css +12 -7
  47. package/components/Table/table.scss +13 -9
  48. package/components/Wizard/wizard.css +20 -2
  49. package/components/Wizard/wizard.scss +22 -2
  50. package/components/_index.css +224 -54
  51. package/docs/components/Accordion/examples/Accordion.md +1 -0
  52. package/docs/components/Card/examples/Card.md +1 -0
  53. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  54. package/docs/components/Page/examples/Page.md +47 -37
  55. package/docs/components/Panel/examples/Panel.md +12 -0
  56. package/docs/components/Wizard/examples/Wizard.md +323 -0
  57. package/docs/demos/AboutModal/examples/AboutModal.md +40 -38
  58. package/docs/demos/Alert/examples/Alert.md +120 -114
  59. package/docs/demos/BackToTop/examples/BackToTop.md +40 -38
  60. package/docs/demos/Banner/examples/Banner.md +80 -76
  61. package/docs/demos/CardView/examples/CardView.md +297 -271
  62. package/docs/demos/Compass/examples/Compass.md +1409 -2732
  63. package/docs/demos/Dashboard/examples/Dashboard.md +40 -38
  64. package/docs/demos/DataList/examples/DataList.md +160 -152
  65. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -114
  66. package/docs/demos/Drawer/examples/Drawer.md +200 -190
  67. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -228
  68. package/docs/demos/Masthead/examples/Masthead.md +320 -304
  69. package/docs/demos/Modal/examples/Modal.md +240 -228
  70. package/docs/demos/Nav/examples/Nav.md +2302 -600
  71. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +180 -170
  72. package/docs/demos/Page/examples/Page.md +606 -568
  73. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -266
  74. package/docs/demos/Skeleton/examples/Skeleton.md +40 -38
  75. package/docs/demos/Table/examples/Table.md +640 -604
  76. package/docs/demos/Tabs/examples/Tabs.md +240 -228
  77. package/docs/demos/Toolbar/examples/Toolbar.md +80 -76
  78. package/docs/demos/Wizard/examples/Wizard.md +360 -342
  79. package/package.json +1 -1
  80. package/patternfly-base-no-globals.css +4238 -784
  81. package/patternfly-base.css +4238 -784
  82. package/patternfly-no-globals.css +4376 -735
  83. package/patternfly.css +4376 -735
  84. package/patternfly.min.css +1 -1
  85. package/patternfly.min.css.map +1 -1
  86. package/patternfly.scss +27 -0
  87. package/sass-utilities/scss-variables.scss +1 -1
package/components/Table/table.scss CHANGED
@@ -180,16 +180,16 @@
180
180
 
181
181
  // * Table compound expansion toggle button
182
182
  --#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
183
- --#{$table}__compound-expansion-toggle__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
183
+ --#{$table}__compound-expansion-toggle__button--BackgroundColor: transparent;
184
184
  --#{$table}__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
185
- --#{$table}__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
186
- --#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
185
+ --#{$table}__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
186
+ --#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
187
187
 
188
188
  // * Table compound expansion toggle button after
189
189
  --#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
190
190
  --#{$table}__compound-expansion-toggle__button--after--BorderRadius: inherit;
191
191
  --#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
192
- --#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
192
+ --#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
193
193
  --#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
194
194
 
195
195
  // * Compound expandable
@@ -266,6 +266,15 @@
266
266
  width: 100%;
267
267
  background-color: var(--#{$table}--BackgroundColor);
268
268
 
269
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
270
+ &.pf-m-plain {
271
+ --#{$table}--BackgroundColor: transparent;
272
+ --#{$table}__expandable-row-content--BackgroundColor: transparent;
273
+ --#{$table}__expandable-row-content--PaddingInlineStart: 0;
274
+ --#{$table}__expandable-row-content--PaddingInlineEnd: 0;
275
+ --#{$table}__control-row--BackgroundColor: transparent;
276
+ }
277
+
269
278
  &.pf-m-fixed {
270
279
  table-layout: fixed;
271
280
  }
@@ -324,11 +333,6 @@
324
333
  }
325
334
  }
326
335
 
327
- // - Table plain
328
- &.pf-m-plain {
329
- --#{$table}--BackgroundColor: transparent;
330
- }
331
-
332
336
  // - Table striped
333
337
  // stylelint-disable
334
338
  &.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
package/components/Wizard/wizard.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --pf-v6-c-wizard--Height--base: 100%;
4
4
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
5
5
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
6
+ --pf-v6-c-wizard--m-plain__header--BackgroundColor: transparent;
6
7
  --pf-v6-c-wizard__header--ZIndex: auto;
7
8
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8
9
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -35,7 +36,7 @@
35
36
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
36
37
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
38
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
38
- --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
39
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
39
40
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
40
41
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
41
42
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -69,6 +70,7 @@
69
70
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
70
71
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
71
72
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
73
+ --pf-v6-c-wizard--m-plain__toggle--BackgroundColor: transparent;
72
74
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
73
75
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
74
76
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -93,17 +95,20 @@
93
95
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
94
96
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
95
97
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
96
- --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
98
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
99
+ --pf-v6-c-wizard--m-plain__nav--BackgroundColor: transparent;
97
100
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
98
101
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
99
102
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
100
103
  --pf-v6-c-wizard__nav--Width: 100%;
104
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
101
105
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
102
106
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
103
107
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
104
108
  }
105
109
  @media screen and (min-width: 62rem) {
106
110
  .pf-v6-c-wizard {
111
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
107
112
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
108
113
  --pf-v6-c-wizard__nav--BoxShadow: none;
109
114
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -118,6 +123,7 @@
118
123
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
119
124
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
120
125
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
126
+ --pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor: transparent;
121
127
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
122
128
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
123
129
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -126,6 +132,7 @@
126
132
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
127
133
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
128
134
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
135
+ --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
129
136
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
130
137
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
131
138
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -156,6 +163,17 @@
156
163
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
157
164
  display: none;
158
165
  }
166
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
167
+ --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
168
+ --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
169
+ --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
170
+ --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
171
+ }
172
+ @media screen and (min-width: 62rem) {
173
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
174
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
175
+ }
176
+ }
159
177
 
160
178
  .pf-v6-c-wizard__header {
161
179
  position: relative;
package/components/Wizard/wizard.scss CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  // Header
9
9
  --#{$wizard}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10
+ --#{$wizard}--m-plain__header--BackgroundColor: transparent;
10
11
  --#{$wizard}__header--ZIndex: auto;
11
12
  --#{$wizard}__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
12
13
  --#{$wizard}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -57,7 +58,7 @@
57
58
  --#{$wizard}__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
58
59
  --#{$wizard}__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
59
60
  --#{$wizard}__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
60
- --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
61
+ --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
61
62
  --#{$wizard}__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
62
63
  --#{$wizard}__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
63
64
  --#{$wizard}__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -99,6 +100,7 @@
99
100
 
100
101
  // Toggle
101
102
  --#{$wizard}__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
103
+ --#{$wizard}--m-plain__toggle--BackgroundColor: transparent;
102
104
  --#{$wizard}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
103
105
  --#{$wizard}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
104
106
  --#{$wizard}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -137,16 +139,19 @@
137
139
 
138
140
  // Nav
139
141
  --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--sm);
140
- --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
142
+ --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
143
+ --#{$wizard}--m-plain__nav--BackgroundColor: transparent;
141
144
  --#{$wizard}__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
142
145
  --#{$wizard}__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
143
146
  --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
144
147
  --#{$wizard}__nav--Width: 100%;
148
+ --#{$wizard}__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
145
149
  --#{$wizard}__nav--lg--Width: #{pf-size-prem(250px)};
146
150
  --#{$wizard}__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
147
151
  --#{$wizard}__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
148
152
 
149
153
  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
154
+ --#{$wizard}__nav--BackgroundColor: var(--#{$wizard}__nav--lg--BackgroundColor);
150
155
  --#{$wizard}__nav--Width: var(--#{$wizard}__nav--lg--Width);
151
156
  --#{$wizard}__nav--BoxShadow: none;
152
157
  --#{$wizard}__nav--BorderBlockEndWidth: 0;
@@ -165,6 +170,7 @@
165
170
 
166
171
  // Outer wrap
167
172
  --#{$wizard}__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
173
+ --#{$wizard}--m-plain__outer-wrap--BackgroundColor: transparent;
168
174
  --#{$wizard}__outer-wrap--lg--PaddingInlineStart: var(--#{$wizard}__nav--Width);
169
175
  --#{$wizard}__outer-wrap--MinHeight: #{pf-size-prem(250px)};
170
176
 
@@ -179,6 +185,7 @@
179
185
 
180
186
  // Footer
181
187
  --#{$wizard}__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
188
+ --#{$wizard}--m-plain__footer--BackgroundColor: transparent;
182
189
  --#{$wizard}__footer--ZIndex: var(--pf-t--global--z-index--xs);
183
190
  --#{$wizard}__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
184
191
  --#{$wizard}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -186,6 +193,7 @@
186
193
  --#{$wizard}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
187
194
  --#{$wizard}__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
188
195
  --#{$wizard}__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
196
+
189
197
  }
190
198
 
191
199
  .#{$wizard} {
@@ -215,6 +223,18 @@
215
223
  display: none;
216
224
  }
217
225
  }
226
+
227
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
228
+ &.pf-m-plain {
229
+ --#{$wizard}__header--BackgroundColor: var(--#{$wizard}--m-plain__header--BackgroundColor);
230
+ --#{$wizard}__toggle--BackgroundColor: var(--#{$wizard}--m-plain__toggle--BackgroundColor);
231
+ --#{$wizard}__outer-wrap--BackgroundColor: var(--#{$wizard}--m-plain__outer-wrap--BackgroundColor);
232
+ --#{$wizard}__footer--BackgroundColor: var(--#{$wizard}--m-plain__footer--BackgroundColor);
233
+
234
+ @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
235
+ --#{$wizard}__nav--BackgroundColor: var(--#{$wizard}--m-plain__nav--BackgroundColor);
236
+ }
237
+ }
218
238
  }
219
239
 
220
240
  .#{$wizard}__header {