@patternfly/patternfly 6.0.0-alpha.123 → 6.0.0-alpha.124

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.
@@ -11,60 +11,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
11
11
  --#{$page}--xl--inset: var(--pf-t--global--spacer--xl);
12
12
 
13
13
  // Header
14
- --#{$page}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15
- --#{$page}__header--ZIndex: var(--pf-t--global--z-index--md);
16
- --#{$page}__header--MinHeight: #{pf-size-prem(76px)}; // fixed height for header to ensure consistency across screen sizes.
17
-
18
- // Header brand
19
- --#{$page}__header-brand--PaddingInlineStart: var(--pf-t--global--spacer--md);
20
- --#{$page}__header-brand--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
21
- --#{$page}__header-brand--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
14
+ --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
22
15
 
23
16
  @media (min-width: $pf-v6-global--breakpoint--xl) {
24
- --#{$page}__header-brand--PaddingInlineStart: var(--#{$page}__header-brand--xl--PaddingInlineStart);
25
17
  --#{$page}--inset: var(--#{$page}--xl--inset);
26
18
  }
27
19
 
28
- // Toggle
29
- --#{$page}__header-sidebar-toggle__c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
30
- --#{$page}__header-sidebar-toggle__c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
31
- --#{$page}__header-sidebar-toggle__c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
32
- --#{$page}__header-sidebar-toggle__c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
33
- --#{$page}__header-sidebar-toggle__c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
34
- --#{$page}__header-sidebar-toggle__c-button--MarginInlineStart: calc(var(--#{$page}__header-sidebar-toggle__c-button--PaddingInlineStart) * -1);
35
- --#{$page}__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
36
-
37
- // Header brand link
38
- --#{$page}__header-brand-link--c-brand--MaxHeight: #{pf-size-prem(60px)};
39
-
40
- // Header nav
41
- --#{$page}__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
42
- --#{$page}__header-nav--xl--BackgroundColor: transparent;
43
- --#{$page}__header-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
44
- --#{$page}__header-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
45
-
46
- @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
47
- --#{$page}__header-nav--BackgroundColor: var(--#{$page}__header-nav--xl--BackgroundColor);
48
- --#{$page}__header-nav--PaddingInlineEnd: var(--#{$page}__header-nav--xl--PaddingInlineEnd);
49
- --#{$page}__header-nav--PaddingInlineStart: var(--#{$page}__header-nav--xl--PaddingInlineStart);
50
- }
51
-
52
- // Header tools
53
- --#{$page}__header-tools--MarginInlineEnd: var(--pf-t--global--spacer--md);
54
- --#{$page}__header-tools--xl--MarginInlineEnd: var(--pf-t--global--spacer--lg);
55
- --#{$page}__header-tools--c-avatar--MarginInlineStart: var(--pf-t--global--spacer--md);
56
- --#{$page}__header-tools-group--MarginInlineStart: var(--pf-t--global--spacer--xl);
57
- --#{$page}__header-tools-group--Display: flex;
58
- --#{$page}__header-tools-item--Display: block;
59
-
60
- // Header tools group button
61
- --#{$page}__header-tools--c-button--m-selected--before--Width: auto;
62
- --#{$page}__header-tools--c-button--m-selected--before--Height: auto;
63
-
64
- @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
65
- --#{$page}__header-tools--MarginInlineEnd: var(--#{$page}__header-tools--xl--MarginInlineEnd);
66
- }
67
-
20
+
68
21
  // Sidebar
69
22
  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
70
23
  --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
@@ -199,119 +152,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
199
152
  }
200
153
 
201
154
  // Header
202
- .#{$page}__header,
203
155
  .#{$page} > .#{$masthead} {
204
- z-index: var(--#{$page}__header--ZIndex);
156
+ z-index: var(--#{$page}--c-masthead--ZIndex);
205
157
  grid-area: header;
206
158
  }
207
159
 
208
- .#{$page}__header {
209
- display: grid;
210
- grid-template-columns: auto auto;
211
- align-items: center;
212
- min-width: 0;
213
- min-height: var(--#{$page}__header--MinHeight);
214
- background-color: var(--#{$page}__header--BackgroundColor);
215
-
216
- > * {
217
- display: flex;
218
- align-items: center;
219
- }
220
-
221
- @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
222
- grid-template-columns: auto 1fr auto;
223
- }
224
-
225
- .#{$masthead} {
226
- grid-column: span 2;
227
- align-self: stretch;
228
- }
229
- }
230
-
231
- // Brand
232
- .#{$page}__header-brand {
233
- grid-column: 1 / 2;
234
- padding-inline-start: var(--#{$page}__header-brand--PaddingInlineStart);
235
-
236
- @media (min-width: $pf-v6-global--breakpoint--xl) {
237
- padding-inline-end: var(--#{$page}__header-brand--xl--PaddingInlineEnd); // set padding right here to allow mobile view to accomodate tools
238
- }
239
- }
240
-
241
- // Link
242
- .#{$page}__header-brand-link {
243
- display: flex;
244
- flex: 1;
245
- align-items: center;
246
-
247
- .#{$brand} {
248
- max-height: var(--#{$page}__header-brand-link--c-brand--MaxHeight); // Hardcode brand image max-height so it always aligns with everthing else.
249
- }
250
- }
251
-
252
- // Sidebar toggle
253
- .#{$page}__header-brand-toggle {
254
- .#{$button} {
255
- padding-block-start: var(--#{$page}__header-sidebar-toggle__c-button--PaddingBlockStart);
256
- padding-block-end: var(--#{$page}__header-sidebar-toggle__c-button--PaddingBlockEnd);
257
- padding-inline-start: var(--#{$page}__header-sidebar-toggle__c-button--PaddingInlineStart);
258
- padding-inline-end: var(--#{$page}__header-sidebar-toggle__c-button--PaddingInlineEnd);
259
- margin-inline-start: var(--#{$page}__header-sidebar-toggle__c-button--MarginInlineStart);
260
- margin-inline-end: var(--#{$page}__header-sidebar-toggle__c-button--MarginInlineEnd);
261
- font-size: var(--#{$page}__header-sidebar-toggle__c-button--FontSize);
262
- line-height: 1;
263
- }
264
- }
265
-
266
- // Header navigation
267
- .#{$page}__header-nav {
268
- grid-row: 2 / 3;
269
- grid-column: 1 / -1;
270
- align-self: stretch;
271
- min-width: 0;
272
- padding-inline-start: var(--#{$page}__header-nav--PaddingInlineStart);
273
- padding-inline-end: var(--#{$page}__header-nav--PaddingInlineEnd);
274
- background-color: var(--#{$page}__header-nav--BackgroundColor);
275
-
276
- @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
277
- grid-row: 1 / 2;
278
- grid-column: 2 / 3;
279
- }
280
-
281
- .#{$nav} {
282
- align-self: stretch;
283
- }
284
- }
285
-
286
- // Header tools
287
- .#{$page}__header-tools {
288
- grid-column: 2 / 3;
289
- margin-inline-start: auto; // to push it to the right
290
- margin-inline-end: var(--#{$page}__header-tools--MarginInlineEnd);
291
-
292
- .#{$avatar} {
293
- margin-inline-start: var(--#{$page}__header-tools--c-avatar--MarginInlineStart);
294
- }
295
-
296
- @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
297
- grid-column: 3 / 4;
298
- }
299
- }
300
-
301
- .#{$page}__header-tools-group {
302
- @include pf-v6-hidden-visible(var(--#{$page}__header-tools-group--Display));
303
-
304
- align-items: center;
305
-
306
- & + & {
307
- margin-inline-start: var(--#{$page}__header-tools-group--MarginInlineStart);
308
- }
309
- }
310
-
311
- .#{$page}__header-tools-item {
312
- @include pf-v6-hidden-visible(var(--#{$page}__header-tools-item--Display));
313
- }
314
-
315
160
  // Sidebar
316
161
  .#{$page}__sidebar {
317
162
  z-index: var(--#{$page}__sidebar--ZIndex);
@@ -4260,7 +4260,7 @@ ol) {
4260
4260
  --pf-v6-c-data-list--FontSize: var( --pf-t--global--font--size--body);
4261
4261
  --pf-v6-c-data-list--LineHeight: var(--pf-t--global--font--line-height--body);
4262
4262
  --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-t--global--border--color--default);
4263
- --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--spacer--sm);
4263
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
4264
4264
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
4265
4265
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
4266
4266
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -4269,7 +4269,7 @@ ol) {
4269
4269
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
4270
4270
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
4271
4271
  --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
4272
- --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--spacer--sm);
4272
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
4273
4273
  --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
4274
4274
  --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
4275
4275
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -15895,32 +15895,7 @@ ul.pf-v6-c-list {
15895
15895
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15896
15896
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
15897
15897
  --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
15898
- --pf-v6-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15899
- --pf-v6-c-page__header--ZIndex: var(--pf-t--global--z-index--md);
15900
- --pf-v6-c-page__header--MinHeight: 4.75rem;
15901
- --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-t--global--spacer--md);
15902
- --pf-v6-c-page__header-brand--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
15903
- --pf-v6-c-page__header-brand--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
15904
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
15905
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15906
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
15907
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
15908
- --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
15909
- --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart: calc(var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart) * -1);
15910
- --pf-v6-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
15911
- --pf-v6-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
15912
- --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15913
- --pf-v6-c-page__header-nav--xl--BackgroundColor: transparent;
15914
- --pf-v6-c-page__header-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
15915
- --pf-v6-c-page__header-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
15916
- --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-t--global--spacer--md);
15917
- --pf-v6-c-page__header-tools--xl--MarginInlineEnd: var(--pf-t--global--spacer--lg);
15918
- --pf-v6-c-page__header-tools--c-avatar--MarginInlineStart: var(--pf-t--global--spacer--md);
15919
- --pf-v6-c-page__header-tools-group--MarginInlineStart: var(--pf-t--global--spacer--xl);
15920
- --pf-v6-c-page__header-tools-group--Display: flex;
15921
- --pf-v6-c-page__header-tools-item--Display: block;
15922
- --pf-v6-c-page__header-tools--c-button--m-selected--before--Width: auto;
15923
- --pf-v6-c-page__header-tools--c-button--m-selected--before--Height: auto;
15898
+ --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
15924
15899
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
15925
15900
  --pf-v6-c-page__sidebar--Width: 18.125rem;
15926
15901
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -16004,22 +15979,9 @@ ul.pf-v6-c-list {
16004
15979
  }
16005
15980
  @media (min-width: 1200px) {
16006
15981
  :where(:root, .pf-v6-c-page) {
16007
- --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-v6-c-page__header-brand--xl--PaddingInlineStart);
16008
15982
  --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
16009
15983
  }
16010
15984
  }
16011
- @media screen and (min-width: 1200px) {
16012
- :where(:root, .pf-v6-c-page) {
16013
- --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-v6-c-page__header-nav--xl--BackgroundColor);
16014
- --pf-v6-c-page__header-nav--PaddingInlineEnd: var(--pf-v6-c-page__header-nav--xl--PaddingInlineEnd);
16015
- --pf-v6-c-page__header-nav--PaddingInlineStart: var(--pf-v6-c-page__header-nav--xl--PaddingInlineStart);
16016
- }
16017
- }
16018
- @media screen and (min-width: 1200px) {
16019
- :where(:root, .pf-v6-c-page) {
16020
- --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-v6-c-page__header-tools--xl--MarginInlineEnd);
16021
- }
16022
- }
16023
15985
  @media screen and (min-width: 1200px) {
16024
15986
  :where(:root, .pf-v6-c-page) {
16025
15987
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
@@ -16043,201 +16005,11 @@ ul.pf-v6-c-list {
16043
16005
  }
16044
16006
  }
16045
16007
 
16046
- .pf-v6-c-page__header,
16047
16008
  .pf-v6-c-page > .pf-v6-c-masthead {
16048
- z-index: var(--pf-v6-c-page__header--ZIndex);
16009
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
16049
16010
  grid-area: header;
16050
16011
  }
16051
16012
 
16052
- .pf-v6-c-page__header {
16053
- display: grid;
16054
- grid-template-columns: auto auto;
16055
- align-items: center;
16056
- min-width: 0;
16057
- min-height: var(--pf-v6-c-page__header--MinHeight);
16058
- background-color: var(--pf-v6-c-page__header--BackgroundColor);
16059
- }
16060
- .pf-v6-c-page__header > * {
16061
- display: flex;
16062
- align-items: center;
16063
- }
16064
- @media screen and (min-width: 992px) {
16065
- .pf-v6-c-page__header {
16066
- grid-template-columns: auto 1fr auto;
16067
- }
16068
- }
16069
- .pf-v6-c-page__header .pf-v6-c-masthead {
16070
- grid-column: span 2;
16071
- align-self: stretch;
16072
- }
16073
-
16074
- .pf-v6-c-page__header-brand {
16075
- grid-column: 1/2;
16076
- padding-inline-start: var(--pf-v6-c-page__header-brand--PaddingInlineStart);
16077
- }
16078
- @media (min-width: 1200px) {
16079
- .pf-v6-c-page__header-brand {
16080
- padding-inline-end: var(--pf-v6-c-page__header-brand--xl--PaddingInlineEnd);
16081
- }
16082
- }
16083
-
16084
- .pf-v6-c-page__header-brand-link {
16085
- display: flex;
16086
- flex: 1;
16087
- align-items: center;
16088
- }
16089
- .pf-v6-c-page__header-brand-link .pf-v6-c-brand {
16090
- max-height: var(--pf-v6-c-page__header-brand-link--c-brand--MaxHeight);
16091
- }
16092
-
16093
- .pf-v6-c-page__header-brand-toggle .pf-v6-c-button {
16094
- padding-block-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart);
16095
- padding-block-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd);
16096
- padding-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart);
16097
- padding-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd);
16098
- margin-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart);
16099
- margin-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd);
16100
- font-size: var(--pf-v6-c-page__header-sidebar-toggle__c-button--FontSize);
16101
- line-height: 1;
16102
- }
16103
-
16104
- .pf-v6-c-page__header-nav {
16105
- grid-row: 2/3;
16106
- grid-column: 1/-1;
16107
- align-self: stretch;
16108
- min-width: 0;
16109
- padding-inline-start: var(--pf-v6-c-page__header-nav--PaddingInlineStart);
16110
- padding-inline-end: var(--pf-v6-c-page__header-nav--PaddingInlineEnd);
16111
- background-color: var(--pf-v6-c-page__header-nav--BackgroundColor);
16112
- }
16113
- @media screen and (min-width: 1200px) {
16114
- .pf-v6-c-page__header-nav {
16115
- grid-row: 1/2;
16116
- grid-column: 2/3;
16117
- }
16118
- }
16119
- .pf-v6-c-page__header-nav .pf-v6-c-nav {
16120
- align-self: stretch;
16121
- }
16122
-
16123
- .pf-v6-c-page__header-tools {
16124
- grid-column: 2/3;
16125
- margin-inline-start: auto;
16126
- margin-inline-end: var(--pf-v6-c-page__header-tools--MarginInlineEnd);
16127
- }
16128
- .pf-v6-c-page__header-tools .pf-v6-c-avatar {
16129
- margin-inline-start: var(--pf-v6-c-page__header-tools--c-avatar--MarginInlineStart);
16130
- }
16131
- @media screen and (min-width: 992px) {
16132
- .pf-v6-c-page__header-tools {
16133
- grid-column: 3/4;
16134
- }
16135
- }
16136
-
16137
- .pf-v6-c-page__header-tools-group {
16138
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
16139
- --pf-v6-hidden-visible--hidden--Display: none;
16140
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16141
- display: var(--pf-v6-hidden-visible--Display);
16142
- align-items: center;
16143
- }
16144
- .pf-v6-c-page__header-tools-group.pf-m-hidden {
16145
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16146
- }
16147
- @media screen and (min-width: 576px) {
16148
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-sm {
16149
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16150
- }
16151
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-sm {
16152
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16153
- }
16154
- }
16155
- @media screen and (min-width: 768px) {
16156
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-md {
16157
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16158
- }
16159
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-md {
16160
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16161
- }
16162
- }
16163
- @media screen and (min-width: 992px) {
16164
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-lg {
16165
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16166
- }
16167
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-lg {
16168
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16169
- }
16170
- }
16171
- @media screen and (min-width: 1200px) {
16172
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-xl {
16173
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16174
- }
16175
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-xl {
16176
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16177
- }
16178
- }
16179
- @media screen and (min-width: 1450px) {
16180
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-2xl {
16181
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16182
- }
16183
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-2xl {
16184
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16185
- }
16186
- }
16187
- .pf-v6-c-page__header-tools-group + .pf-v6-c-page__header-tools-group {
16188
- margin-inline-start: var(--pf-v6-c-page__header-tools-group--MarginInlineStart);
16189
- }
16190
-
16191
- .pf-v6-c-page__header-tools-item {
16192
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
16193
- --pf-v6-hidden-visible--hidden--Display: none;
16194
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16195
- display: var(--pf-v6-hidden-visible--Display);
16196
- }
16197
- .pf-v6-c-page__header-tools-item.pf-m-hidden {
16198
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16199
- }
16200
- @media screen and (min-width: 576px) {
16201
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-sm {
16202
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16203
- }
16204
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-sm {
16205
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16206
- }
16207
- }
16208
- @media screen and (min-width: 768px) {
16209
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-md {
16210
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16211
- }
16212
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-md {
16213
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16214
- }
16215
- }
16216
- @media screen and (min-width: 992px) {
16217
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-lg {
16218
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16219
- }
16220
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-lg {
16221
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16222
- }
16223
- }
16224
- @media screen and (min-width: 1200px) {
16225
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-xl {
16226
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16227
- }
16228
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-xl {
16229
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16230
- }
16231
- }
16232
- @media screen and (min-width: 1450px) {
16233
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-2xl {
16234
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16235
- }
16236
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-2xl {
16237
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16238
- }
16239
- }
16240
-
16241
16013
  .pf-v6-c-page__sidebar {
16242
16014
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
16243
16015
  display: flex;
@@ -1,8 +1,3 @@
1
- #ws-core-c-navigation-horizontal-in-masthead .pf-v6-c-page__header-nav,
2
- #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v6-c-page__header-nav {
3
- grid-row: 1;
4
- }
5
-
6
1
  #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
7
2
  [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
8
3
  width: 280px;
@@ -2,6 +2,6 @@
2
2
  .ws-core-u-alignment .pf-v6-u-text-align-center,
3
3
  .ws-core-u-alignment .pf-v6-u-text-align-end,
4
4
  .ws-core-u-alignment .pf-v6-u-text-align-justify {
5
- padding: .5rem !important;
6
- border: 2px dashed #393f44;
5
+ padding: var(--pf-t--global--spacer--sm);
6
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
7
7
  }
@@ -6,6 +6,6 @@
6
6
  .ws-core-u-display .pf-v6-u-display-inline,
7
7
  .ws-core-u-display .pf-v6-u-display-table,
8
8
  .ws-core-u-display .pf-v6-u-display-table-cell {
9
- padding: .5rem !important;
10
- border: 2px dashed #393f44;
9
+ padding: var(--pf-t--global--spacer--sm);
10
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
11
11
  }
@@ -2,8 +2,8 @@
2
2
  .ws-core-u-flex .ws-example-flex-item,
3
3
  .ws-core-u-flex .pf-v6-u-display-inline-flex {
4
4
  flex-wrap: wrap;
5
- padding: .5rem !important;
6
- border: 2px dashed #393f44;
5
+ padding: var(--pf-t--global--spacer--sm);
6
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
7
7
  }
8
8
 
9
9
  #ws-core-u-flex-aligned-items .pf-v6-u-display-flex,
@@ -1,5 +1,5 @@
1
1
  .ws-core-u-float .pf-v6-u-float-inline-start,
2
2
  .ws-core-u-float .pf-v6-u-float-inline-end {
3
- padding: .5rem !important;
4
- border: 2px dashed #393f44;
5
- }
3
+ padding: var(--pf-t--global--spacer--sm);
4
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
5
+ }
@@ -3,6 +3,6 @@
3
3
  .pf-v6-u-min-height,
4
4
  .pf-v6-u-max-height,
5
5
  .ws-example-u-sizing-item {
6
- padding: .5rem !important;
7
- border: 2px dashed #393f44;
6
+ padding: var(--pf-t--global--spacer--sm);
7
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
8
8
  }
@@ -1,5 +1,5 @@
1
1
  .ws-core-u-spacing .ws-example-flex-item,
2
2
  .ws-core-u-spacing .pf-v6-u-display-flex {
3
- padding: .5rem;
4
- border: 2px dashed #393f44;
3
+ padding: var(--pf-t--global--spacer--sm);
4
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
5
5
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.123",
4
+ "version": "6.0.0-alpha.124",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -5107,6 +5107,12 @@
5107
5107
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
5108
5108
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
5109
5109
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
5110
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
5111
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
5112
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
5113
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
5114
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
5115
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
5110
5116
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
5111
5117
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
5112
5118
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
@@ -5247,6 +5253,7 @@
5247
5253
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5248
5254
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5249
5255
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5256
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
5250
5257
  --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
5251
5258
  --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
5252
5259
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
@@ -5356,12 +5363,19 @@
5356
5363
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
5357
5364
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
5358
5365
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
5366
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
5359
5367
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
5360
5368
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
5361
5369
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
5362
5370
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5363
5371
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5364
5372
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5373
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
5374
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
5375
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
5376
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
5377
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
5378
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
5365
5379
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
5366
5380
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
5367
5381
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
@@ -5446,15 +5460,14 @@
5446
5460
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
5447
5461
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
5448
5462
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
5449
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5450
5463
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
5464
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5451
5465
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
5452
5466
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
5453
5467
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
5454
5468
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
5455
5469
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
5456
5470
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5457
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
5458
5471
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
5459
5472
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
5460
5473
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -5613,6 +5626,12 @@
5613
5626
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
5614
5627
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
5615
5628
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
5629
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
5630
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
5631
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
5632
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
5633
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
5634
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
5616
5635
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
5617
5636
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
5618
5637
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
@@ -5630,6 +5649,7 @@
5630
5649
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
5631
5650
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
5632
5651
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
5652
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
5633
5653
  --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
5634
5654
  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
5635
5655
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -5670,9 +5690,16 @@
5670
5690
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
5671
5691
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
5672
5692
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
5693
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
5673
5694
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
5674
5695
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
5675
5696
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
5697
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
5698
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
5699
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
5700
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
5701
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
5702
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
5676
5703
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
5677
5704
  --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
5678
5705
  --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
@@ -5810,7 +5837,6 @@
5810
5837
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
5811
5838
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
5812
5839
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5813
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
5814
5840
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
5815
5841
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
5816
5842
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -5900,8 +5926,8 @@
5900
5926
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
5901
5927
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
5902
5928
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
5903
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5904
5929
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
5930
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5905
5931
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
5906
5932
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
5907
5933
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);