@patternfly/patternfly 6.0.0-alpha.111 → 6.0.0-alpha.112

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 (22) hide show
  1. package/base/tokens/_tokens-font.scss +0 -1
  2. package/components/Toolbar/toolbar.css +16 -0
  3. package/components/Toolbar/toolbar.scss +23 -1
  4. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -4
  5. package/docs/components/Page/deprecated/PageHeader.css +4 -4
  6. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  7. package/docs/components/Tabs/examples/Tabs.md +1 -3
  8. package/docs/components/Tile/examples/Tile.css +5 -5
  9. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  10. package/docs/components/Toolbar/examples/Toolbar.css +40 -35
  11. package/docs/components/Toolbar/examples/Toolbar.md +124 -0
  12. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  13. package/docs/components/Truncate/examples/Truncate.css +1 -1
  14. package/docs/demos/Card/examples/Card.css +6 -6
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +16 -0
  17. package/patternfly-theme-dark-unversioned.css +16 -0
  18. package/patternfly.css +16 -0
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
  21. package/docs/components/Tabs/examples/Tabs.css +0 -10
  22. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
package/base/tokens/_tokens-font.scss CHANGED
@@ -146,4 +146,3 @@
146
146
  var(--pf-t--global--box-shadow--spread--lg)
147
147
  var(--pf-t--global--box-shadow--color--lg);
148
148
  }
149
-
package/components/Toolbar/toolbar.css CHANGED
@@ -81,6 +81,10 @@
81
81
  --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
82
82
  --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
83
83
  --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
84
+ --pf-v6-c-toolbar--BackgroundColor: transparent;
85
+ --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
86
+ --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
87
+ --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
84
88
  --pf-v6-c-toolbar__item--Width: auto;
85
89
  --pf-v6-c-toolbar__item--MinWidth: auto;
86
90
  --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -94,6 +98,7 @@
94
98
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
95
99
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
96
100
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
101
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
97
102
  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
98
103
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
99
104
  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-v6-global--Transition);
@@ -121,8 +126,10 @@
121
126
  width: var(--pf-v6-c-toolbar--Width, auto);
122
127
  font-size: var(--pf-v6-c-toolbar--FontSize);
123
128
  line-height: var(--pf-v6-c-toolbar--LineHeight);
129
+ background-color: var(--pf-v6-c-toolbar--BackgroundColor);
124
130
  }
125
131
  .pf-v6-c-toolbar.pf-m-sticky {
132
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
126
133
  position: sticky;
127
134
  inset-block-start: 0;
128
135
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
@@ -147,6 +154,15 @@
147
154
  --pf-v6-c-toolbar--PaddingInlineStart: var(--pf-v6-c-toolbar--m-page-insets--inset);
148
155
  --pf-v6-c-toolbar--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-page-insets--inset);
149
156
  }
157
+ .pf-v6-c-toolbar.pf-m-primary {
158
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
159
+ }
160
+ .pf-v6-c-toolbar.pf-m-secondary {
161
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-secondary--BackgroundColor);
162
+ }
163
+ .pf-v6-c-toolbar.pf-m-no-background {
164
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
165
+ }
150
166
 
151
167
  .pf-v6-c-toolbar__content,
152
168
  .pf-v6-c-toolbar__content-section,
package/components/Toolbar/toolbar.scss CHANGED
@@ -16,6 +16,12 @@ $pf-v6--include-toolbar-breakpoints: true !default;
16
16
  --#{$toolbar}--PaddingInline: var(--pf-t--global--spacer--md);
17
17
  --#{$toolbar}--LineHeight: var(--pf-t--global--font--line-height--body);
18
18
  --#{$toolbar}--FontSize: var(--pf-t--global--font--size--body--default);
19
+ --#{$toolbar}--BackgroundColor: transparent;
20
+
21
+ // * Toolbar background modifiers
22
+ --#{$toolbar}--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
23
+ --#{$toolbar}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24
+ --#{$toolbar}--m-no-background--BackgroundColor: transparent;
19
25
 
20
26
  // * Toolbar item
21
27
  --#{$toolbar}__item--Width: auto;
@@ -36,10 +42,10 @@ $pf-v6--include-toolbar-breakpoints: true !default;
36
42
  --#{$toolbar}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
37
43
  --#{$toolbar}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
38
44
 
39
- // * Toolbar chip group
40
45
  // * Toolbar sticky
41
46
  --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
42
47
  --#{$toolbar}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
48
+ --#{$toolbar}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
43
49
 
44
50
  // * Toolbar insets
45
51
  --#{$toolbar}--m-page-insets--inset: var(--#{$page}--inset);
@@ -79,9 +85,12 @@ $pf-v6--include-toolbar-breakpoints: true !default;
79
85
  width: var(--#{$toolbar}--Width, auto);
80
86
  font-size: var(--#{$toolbar}--FontSize);
81
87
  line-height: var(--#{$toolbar}--LineHeight);
88
+ background-color: var(--#{$toolbar}--BackgroundColor);
82
89
 
83
90
  // - Toolbar sticky
84
91
  &.pf-m-sticky {
92
+ --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-sticky--BackgroundColor);
93
+
85
94
  position: sticky;
86
95
  inset-block-start: 0;
87
96
  z-index: var(--#{$toolbar}--m-sticky--ZIndex);
@@ -117,6 +126,19 @@ $pf-v6--include-toolbar-breakpoints: true !default;
117
126
  --#{$toolbar}--PaddingInlineEnd: var(--#{$toolbar}--m-page-insets--inset);
118
127
  }
119
128
 
129
+ // - Toolbar background modifiers
130
+ &.pf-m-primary {
131
+ --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-primary--BackgroundColor);
132
+ }
133
+
134
+ &.pf-m-secondary {
135
+ --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-secondary--BackgroundColor);
136
+ }
137
+
138
+ &.pf-m-no-background {
139
+ --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-no-background--BackgroundColor);
140
+ }
141
+
120
142
  // @include resize-observer-placeholder('md') {
121
143
  // do resize observer things here
122
144
  // }
package/docs/components/OverflowMenu/examples/overflow-menu.css CHANGED
@@ -22,14 +22,14 @@
22
22
  min-height: 8rem;
23
23
  }
24
24
 
25
- #ws-core-c-overflow-menu-simple-expanded .pf-v5-c-overflow-menu__item,
26
- #ws-core-c-overflow-menu-simple-expanded .pf-v5-c-overflow-menu__group,
27
- #ws-core-c-overflow-menu-group-types .pf-v5-c-overflow-menu__group:not([class*="pf-m-"]) {
25
+ #ws-core-c-overflow-menu-simple-expanded .pf-v6-c-overflow-menu__item,
26
+ #ws-core-c-overflow-menu-simple-expanded .pf-v6-c-overflow-menu__group,
27
+ #ws-core-c-overflow-menu-group-types .pf-v6-c-overflow-menu__group:not([class*="pf-m-"]) {
28
28
  padding: .5rem;
29
29
  border: 2px dashed #393f44;
30
30
  }
31
31
 
32
- #ws-core-c-overflow-menu-simple-expanded .pf-v5-c-overflow-menu__group .pf-v5-c-overflow-menu__item {
32
+ #ws-core-c-overflow-menu-simple-expanded .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item {
33
33
  padding: 0;
34
34
  border: none;
35
35
  }
package/docs/components/Page/deprecated/PageHeader.css CHANGED
@@ -1,9 +1,9 @@
1
- .ws-html-deprecated-c-page :is(.pf-v5-c-page__sidebar, .pf-v5-c-page__main-subnav) {
2
- color: var(--pf-v5-global--Color--light-100);
1
+ .ws-html-deprecated-c-page :is(.pf-v6-c-page__sidebar, .pf-v6-c-page__main-subnav) {
2
+ color: var(--pf-t--global--text--color--inverse);
3
3
  }
4
4
 
5
- .ws-html-deprecated-c-page .pf-v5-c-page__main-section.pf-m-dark-200 {
6
- color: var(--pf-v5-global--Color--dark-100);
5
+ .ws-html-deprecated-c-page .pf-v6-c-page__main-section.pf-m-dark-200 {
6
+ color: var(--pf-t--global--text--color--regular);
7
7
  }
8
8
 
9
9
  #ws-html-deprecated-c-page-with-or-without-fill .ws-preview-html,
package/docs/components/Skeleton/examples/Skeleton.css CHANGED
@@ -7,7 +7,7 @@
7
7
  align-items: flex-end;
8
8
  }
9
9
 
10
- #ws-core-c-skeleton-percentage-height-modifiers .ws-preview-html .pf-v5-c-skeleton {
10
+ #ws-core-c-skeleton-percentage-height-modifiers .ws-preview-html .pf-v6-c-skeleton {
11
11
  flex: 1;
12
12
  margin: 0 2px;
13
13
  }
package/docs/components/Tabs/examples/Tabs.md CHANGED
@@ -2,9 +2,7 @@
2
2
  id: Tabs
3
3
  section: components
4
4
  cssPrefix: pf-v6-c-tabs
5
- ---import './Tabs.css'
6
-
7
- # Examples
5
+ ---# Examples
8
6
 
9
7
  ## Default
10
8
 
package/docs/components/Tile/examples/Tile.css CHANGED
@@ -1,7 +1,7 @@
1
- #ws-core-c-tile-basic-tiles .ws-preview-html .pf-v5-c-tile,
2
- #ws-core-c-tile-extra-content .ws-preview-html .pf-v5-c-tile,
3
- #ws-core-c-tile-stacked-tiles .ws-preview-html .pf-v5-c-tile,
4
- #ws-core-c-tile-stacked-tiles-large .ws-preview-html .pf-v5-c-tile {
1
+ #ws-core-c-tile-basic-tiles .ws-preview-html .pf-v6-c-tile,
2
+ #ws-core-c-tile-extra-content .ws-preview-html .pf-v6-c-tile,
3
+ #ws-core-c-tile-stacked-tiles .ws-preview-html .pf-v6-c-tile,
4
+ #ws-core-c-tile-stacked-tiles-large .ws-preview-html .pf-v6-c-tile {
5
5
  margin-inline-end: 8px;
6
6
  }
7
7
 
@@ -9,6 +9,6 @@
9
9
  display: flex;
10
10
  }
11
11
 
12
- #ws-core-c-tile-extra-content .ws-preview-html .pf-v5-c-tile {
12
+ #ws-core-c-tile-extra-content .ws-preview-html .pf-v6-c-tile {
13
13
  width: 300px;
14
14
  }
package/docs/components/ToggleGroup/examples/toggle-group.md CHANGED
@@ -2,9 +2,7 @@
2
2
  id: Toggle group
3
3
  section: components
4
4
  cssPrefix: pf-v6-c-toggle-group
5
- ---import './toggle-group.css'
6
-
7
- ## Examples
5
+ ---## Examples
8
6
 
9
7
  ### Default
10
8
 
package/docs/components/Toolbar/examples/Toolbar.css CHANGED
@@ -18,50 +18,55 @@
18
18
  min-height: 28rem;
19
19
  }
20
20
 
21
- #ws-core-c-toolbar-adjusted-group-column-gap .pf-v5-c-toolbar,
22
- #ws-core-c-toolbar-adjusted-group-column-gap .pf-v5-c-toolbar__group,
23
- #ws-core-e-toolbar-simple .pf-v5-c-toolbar,
24
- #ws-core-e-toolbar-simple .pf-v5-c-toolbar__group,
25
- #ws-core-e-toolbar-adjusted-spacers .pf-v5-c-toolbar,
26
- #ws-core-e-toolbar-adjusted-group-spacers .pf-v5-c-toolbar,
27
- #ws-core-c-toolbar-simple .pf-v5-c-toolbar,
28
- #ws-core-c-toolbar-simple .pf-v5-c-toolbar__group,
29
- #ws-core-c-toolbar-adjusted-spacers .pf-v5-c-toolbar,
30
- #ws-core-c-toolbar-adjusted-group-spacers .pf-v5-c-toolbar,
31
- #ws-core-c-toolbar-insets .pf-v5-c-toolbar,
32
- #ws-core-c-toolbar-page-insets .pf-v5-c-toolbar,
33
- #ws-core-c-toolbar-width-control .pf-v5-c-toolbar {
21
+ #ws-core-c-toolbar-adjusted-group-column-gap .pf-v6-c-toolbar,
22
+ #ws-core-c-toolbar-adjusted-group-column-gap .pf-v6-c-toolbar__group,
23
+ #ws-core-e-toolbar-simple .pf-v6-c-toolbar,
24
+ #ws-core-e-toolbar-simple .pf-v6-c-toolbar__group,
25
+ #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar,
26
+ #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar,
27
+ #ws-core-c-toolbar-simple .pf-v6-c-toolbar,
28
+ #ws-core-c-toolbar-simple .pf-v6-c-toolbar__group,
29
+ #ws-core-c-toolbar-adjusted-spacers .pf-v6-c-toolbar,
30
+ #ws-core-c-toolbar-adjusted-group-spacers .pf-v6-c-toolbar,
31
+ #ws-core-c-toolbar-insets .pf-v6-c-toolbar,
32
+ #ws-core-c-toolbar-page-insets .pf-v6-c-toolbar,
33
+ #ws-core-c-toolbar-width-control .pf-v6-c-toolbar {
34
34
  border: var(--pf-t--global--border--width--control--default) dashed var(--pf-t--global--border--color--default);
35
35
  }
36
36
 
37
- #ws-core-e-toolbar-simple .pf-v5-c-toolbar__group .pf-v5-c-toolbar__item,
38
- #ws-core-c-toolbar-simple .pf-v5-c-toolbar__group .pf-v5-c-toolbar__item {
37
+ #ws-core-e-toolbar-simple .pf-v6-c-toolbar__group .pf-v6-c-toolbar__item,
38
+ #ws-core-c-toolbar-simple .pf-v6-c-toolbar__group .pf-v6-c-toolbar__item {
39
39
  border: none;
40
40
  }
41
41
 
42
- #ws-core-c-toolbar-adjusted-group-column-gap .pf-v5-c-toolbar__item,
43
- #ws-core-e-toolbar-simple .pf-v5-c-toolbar__item,
44
- #ws-core-e-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
45
- #ws-core-e-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
46
- #ws-core-c-toolbar-simple .pf-v5-c-toolbar__item,
47
- #ws-core-c-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
48
- #ws-core-c-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
49
- #ws-core-c-toolbar-insets .pf-v5-c-toolbar__item,
50
- #ws-core-c-toolbar-page-insets .pf-v5-c-toolbar__item,
51
- #ws-core-c-toolbar-width-control .pf-v5-c-toolbar__item {
42
+ #ws-core-c-toolbar-adjusted-group-column-gap .pf-v6-c-toolbar__item,
43
+ #ws-core-e-toolbar-simple .pf-v6-c-toolbar__item,
44
+ #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
45
+ #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
46
+ #ws-core-c-toolbar-simple .pf-v6-c-toolbar__item,
47
+ #ws-core-c-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
48
+ #ws-core-c-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
49
+ #ws-core-c-toolbar-insets .pf-v6-c-toolbar__item,
50
+ #ws-core-c-toolbar-page-insets .pf-v6-c-toolbar__item,
51
+ #ws-core-c-toolbar-width-control .pf-v6-c-toolbar__item {
52
52
  padding-block: .25rem;
53
53
  padding-inline: .5rem;
54
54
  }
55
55
 
56
- #ws-core-c-toolbar-adjusted-group-column-gap .pf-v5-c-toolbar__item,
57
- #ws-core-e-toolbar-simple .pf-v5-c-toolbar__item,
58
- #ws-core-e-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
59
- #ws-core-e-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
60
- #ws-core-c-toolbar-simple .pf-v5-c-toolbar__item,
61
- #ws-core-c-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
62
- #ws-core-c-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
63
- #ws-core-c-toolbar-insets .pf-v5-c-toolbar__item,
64
- #ws-core-c-toolbar-page-insets .pf-v5-c-toolbar__item,
65
- #ws-core-c-toolbar-width-control .pf-v5-c-toolbar__item {
56
+ #ws-core-c-toolbar-adjusted-group-column-gap .pf-v6-c-toolbar__item,
57
+ #ws-core-e-toolbar-simple .pf-v6-c-toolbar__item,
58
+ #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
59
+ #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
60
+ #ws-core-c-toolbar-simple .pf-v6-c-toolbar__item,
61
+ #ws-core-c-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
62
+ #ws-core-c-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
63
+ #ws-core-c-toolbar-insets .pf-v6-c-toolbar__item,
64
+ #ws-core-c-toolbar-page-insets .pf-v6-c-toolbar__item,
65
+ #ws-core-c-toolbar-width-control .pf-v6-c-toolbar__item {
66
66
  background-color: var(--pf-t--global--background--color--secondary--default);
67
67
  }
68
+
69
+ #ws-core-c-toolbar-sticky-toolbar .ws-preview-html {
70
+ height: 200px;
71
+ overflow: auto;
72
+ }
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -2232,6 +2232,127 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2232
2232
 
2233
2233
  ```
2234
2234
 
2235
+ ### Primary background
2236
+
2237
+ ```html
2238
+ <div
2239
+ class="pf-v6-c-toolbar pf-m-primary"
2240
+ id="toolbar-primary-background-example"
2241
+ >
2242
+ <div class="pf-v6-c-toolbar__content">
2243
+ <div class="pf-v6-c-toolbar__content-section">
2244
+ <div class="pf-v6-c-toolbar__item">Item</div>
2245
+ <div class="pf-v6-c-toolbar__item">Item</div>
2246
+ <div class="pf-v6-c-toolbar__item">Item</div>
2247
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2248
+ <div class="pf-v6-c-toolbar__group">
2249
+ <div class="pf-v6-c-toolbar__item">Item</div>
2250
+ <div class="pf-v6-c-toolbar__item">Item</div>
2251
+ <div class="pf-v6-c-toolbar__item">Item</div>
2252
+ </div>
2253
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2254
+ <div class="pf-v6-c-toolbar__item">Item</div>
2255
+ <div class="pf-v6-c-toolbar__item">Item</div>
2256
+ <div class="pf-v6-c-toolbar__item">Item</div>
2257
+ </div>
2258
+ </div>
2259
+ </div>
2260
+
2261
+ ```
2262
+
2263
+ ### Secondary background
2264
+
2265
+ ```html
2266
+ <div
2267
+ class="pf-v6-c-toolbar pf-m-secondary"
2268
+ id="toolbar-secondary-background-example"
2269
+ >
2270
+ <div class="pf-v6-c-toolbar__content">
2271
+ <div class="pf-v6-c-toolbar__content-section">
2272
+ <div class="pf-v6-c-toolbar__item">Item</div>
2273
+ <div class="pf-v6-c-toolbar__item">Item</div>
2274
+ <div class="pf-v6-c-toolbar__item">Item</div>
2275
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2276
+ <div class="pf-v6-c-toolbar__group">
2277
+ <div class="pf-v6-c-toolbar__item">Item</div>
2278
+ <div class="pf-v6-c-toolbar__item">Item</div>
2279
+ <div class="pf-v6-c-toolbar__item">Item</div>
2280
+ </div>
2281
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2282
+ <div class="pf-v6-c-toolbar__item">Item</div>
2283
+ <div class="pf-v6-c-toolbar__item">Item</div>
2284
+ <div class="pf-v6-c-toolbar__item">Item</div>
2285
+ </div>
2286
+ </div>
2287
+ </div>
2288
+
2289
+ ```
2290
+
2291
+ ### No background
2292
+
2293
+ ```html
2294
+ <div
2295
+ class="pf-v6-c-toolbar pf-m-no-background"
2296
+ id="toolbar-no-background-example"
2297
+ >
2298
+ <div class="pf-v6-c-toolbar__content">
2299
+ <div class="pf-v6-c-toolbar__content-section">
2300
+ <div class="pf-v6-c-toolbar__item">Item</div>
2301
+ <div class="pf-v6-c-toolbar__item">Item</div>
2302
+ <div class="pf-v6-c-toolbar__item">Item</div>
2303
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2304
+ <div class="pf-v6-c-toolbar__group">
2305
+ <div class="pf-v6-c-toolbar__item">Item</div>
2306
+ <div class="pf-v6-c-toolbar__item">Item</div>
2307
+ <div class="pf-v6-c-toolbar__item">Item</div>
2308
+ </div>
2309
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2310
+ <div class="pf-v6-c-toolbar__item">Item</div>
2311
+ <div class="pf-v6-c-toolbar__item">Item</div>
2312
+ <div class="pf-v6-c-toolbar__item">Item</div>
2313
+ </div>
2314
+ </div>
2315
+ </div>
2316
+
2317
+ ```
2318
+
2319
+ ### Sticky toolbar
2320
+
2321
+ ```html
2322
+ <div class="pf-v6-c-toolbar pf-m-sticky" id="toolbar-sticky-example">
2323
+ <div class="pf-v6-c-toolbar__content">
2324
+ <div class="pf-v6-c-toolbar__content-section">
2325
+ <div class="pf-v6-c-toolbar__item">Item</div>
2326
+ <div class="pf-v6-c-toolbar__item">Item</div>
2327
+ <div class="pf-v6-c-toolbar__item">Item</div>
2328
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2329
+ <div class="pf-v6-c-toolbar__group">
2330
+ <div class="pf-v6-c-toolbar__item">Item</div>
2331
+ <div class="pf-v6-c-toolbar__item">Item</div>
2332
+ <div class="pf-v6-c-toolbar__item">Item</div>
2333
+ </div>
2334
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2335
+ <div class="pf-v6-c-toolbar__item">Item</div>
2336
+ <div class="pf-v6-c-toolbar__item">Item</div>
2337
+ <div class="pf-v6-c-toolbar__item">Item</div>
2338
+ </div>
2339
+ </div>
2340
+ </div>
2341
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor mattis massa dignissim blandit. Mauris pellentesque nisi a erat ultricies, mollis auctor nulla volutpat. Donec eu nisl magna. Donec nisi nulla, blandit et mauris in, lobortis elementum neque. Nunc pharetra eleifend purus, in commodo nisl accumsan in. Vestibulum feugiat nisl eu venenatis feugiat. Morbi ornare velit vitae tellus sollicitudin, sed ornare neque sagittis. Proin sodales, libero et vestibulum luctus, nunc mi euismod dui, vel accumsan lacus odio vel nibh. Etiam at mattis purus, sit amet vestibulum metus. Maecenas feugiat condimentum ligula eget hendrerit. Nullam eleifend convallis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam rhoncus consectetur enim, at interdum mi tincidunt eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
2342
+ <br />
2343
+ <br />
2344
+ Maecenas vel sollicitudin ipsum, pulvinar pharetra magna. Aenean vel ipsum vel purus malesuada sagittis eget ac odio. Nullam vitae diam mollis, consectetur est vitae, sodales diam. Vivamus eu lectus quis mi maximus porta. Praesent erat sapien, vestibulum nec libero non, tincidunt congue mauris. Pellentesque vitae imperdiet mi. Nulla in ipsum neque. Cras a quam ut sem venenatis euismod non at tortor. Mauris porta purus augue, ut pharetra elit varius at. Vestibulum fringilla ligula ac leo tristique, porta venenatis nibh convallis.
2345
+ <br />
2346
+ <br />
2347
+ Vestibulum vel orci mattis magna tristique suscipit. In vel tellus tempor, consectetur mi at, pellentesque enim. Cras venenatis tellus eget velit porttitor, sit amet malesuada tortor venenatis. Maecenas vitae augue ac orci volutpat gravida. In fermentum, orci eget tincidunt lobortis, turpis orci porta nibh, cursus dignissim lectus sapien at felis. Nulla facilisi. Aenean lectus justo, pellentesque sed nulla ut, pulvinar pellentesque tortor. Ut tempus euismod dolor gravida rhoncus. Quisque sed lorem sit amet erat tincidunt aliquet quis in nulla. Maecenas arcu erat, hendrerit a dui eget, convallis pharetra sapien. Nunc tellus enim, dictum eu egestas vel, ultrices eget est. Etiam quis vehicula sem. Nulla facilisi. Donec ante ipsum, fringilla iaculis ex a, tincidunt lobortis mi.
2348
+ <br />
2349
+ <br />
2350
+ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse porttitor sem quis ante consequat, vitae commodo nulla ultricies. Nulla fermentum ipsum ac dolor elementum, eu luctus ex condimentum. Sed sed arcu aliquam, porta metus in, sollicitudin felis. Sed faucibus lacus consectetur orci ultricies laoreet. Morbi sed lectus dictum sem tempor porta. Donec ut diam tempor, venenatis erat vitae, accumsan diam. Etiam sed purus eget lacus vehicula iaculis non euismod dolor. Quisque ultricies eget est in semper.
2351
+ <br />
2352
+ <br />Fusce tristique nulla id vestibulum maximus. Morbi sit amet nisi nec orci pulvinar interdum. Duis convallis, nunc vel pharetra blandit, urna neque eleifend nunc, maximus faucibus tellus nisl a velit. Aliquam quis turpis tempor nisi ultricies fermentum at et ipsum. Pellentesque vel tincidunt nisl. Donec elit ante, sodales ac ultrices vitae, egestas ut magna. Nulla sollicitudin ornare mi, a porttitor sem fermentum vitae. Praesent maximus fringilla gravida. Sed ultricies turpis ut lacus sodales, et aliquet risus accumsan. Pellentesque lacus sapien, cursus vitae nulla vel, bibendum tristique risus.
2353
+
2354
+ ```
2355
+
2235
2356
  ## Documentation
2236
2357
 
2237
2358
  ### Overview
@@ -2251,6 +2372,9 @@ As the toolbar component is a hybrid layout and component, some of its elements
2251
2372
  | `.pf-m-sticky` | `.pf-v6-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
2252
2373
  | `.pf-m-full-height` | `.pf-v6-c-toolbar`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
2253
2374
  | `.pf-m-static` | `.pf-v6-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
2375
+ | `.pf-m-primary` | `.pf-v6-c-toolbar` | Modifies toolbar to have primary background color. |
2376
+ | `.pf-m-secondary` | `.pf-v6-c-toolbar` | Modifies toolbar to have secondary background color. |
2377
+ | `.pf-m-no-background` | `.pf-v6-c-toolbar` | Modifies toolbar to have no background color. |
2254
2378
  | `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
2255
2379
  | `.pf-m-expanded` | `.pf-v6-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
2256
2380
  | `.pf-m-icon-button-group` | `.pf-v6-c-toolbar__group` | Initiates icon button group spacing. |
package/docs/components/Tooltip/examples/Tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
1
  /* adds padding to full page examples so arrows are visible */
2
2
  .ws-core-c-tooltip:not(.ws-preview) {
3
- padding: var(--pf-v5-global--spacer--md);
3
+ padding: var(--pf-t--global--spacer--md);
4
4
  }
package/docs/components/Truncate/examples/Truncate.css CHANGED
@@ -1,4 +1,4 @@
1
- .pf-v5-c-truncate--example {
1
+ .pf-v6-c-truncate--example {
2
2
  width: 320px;
3
3
  resize: horizontal;
4
4
  overflow: auto;
package/docs/demos/Card/examples/Card.css CHANGED
@@ -7,18 +7,18 @@
7
7
  position: relative;
8
8
  }
9
9
 
10
- #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-popover {
10
+ #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v6-c-popover {
11
11
  position: absolute;
12
12
  margin-block-start: -12px;
13
13
  z-index: 1000;
14
14
  transform: translateY(-50%);
15
- inset-inline-start: calc(100% + var(--pf-v5-c-popover__arrow--Width) + var(--pf-v5-global--spacer--sm));
15
+ inset-inline-start: calc(100% + var(--pf-v6-c-popover__arrow--Width) + var(--pf-t--global--spacer--sm));
16
16
  }
17
17
 
18
- #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-table {
19
- --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
20
- --pf-v5-c-table__expandable-row--after--BorderColor: transparent;
21
- --pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-v5-global--spacer--sm);
18
+ #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v6-c-table {
19
+ --pf-v6-c-table__expandable-row--after--BorderLeftWidth: 0;
20
+ --pf-v6-c-table__expandable-row--after--BorderColor: transparent;
21
+ --pf-v6-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-v6-global--spacer--sm);
22
22
  }
23
23
 
24
24
  .ws-chart {
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.111",
4
+ "version": "6.0.0-alpha.112",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11783,6 +11783,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11783
11783
  --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
11784
11784
  --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
11785
11785
  --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
11786
+ --pf-v6-c-toolbar--BackgroundColor: transparent;
11787
+ --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11788
+ --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11789
+ --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
11786
11790
  --pf-v6-c-toolbar__item--Width: auto;
11787
11791
  --pf-v6-c-toolbar__item--MinWidth: auto;
11788
11792
  --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -11796,6 +11800,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11796
11800
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11797
11801
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
11798
11802
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
11803
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11799
11804
  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
11800
11805
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
11801
11806
  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-v6-global--Transition);
@@ -11823,8 +11828,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11823
11828
  width: var(--pf-v6-c-toolbar--Width, auto);
11824
11829
  font-size: var(--pf-v6-c-toolbar--FontSize);
11825
11830
  line-height: var(--pf-v6-c-toolbar--LineHeight);
11831
+ background-color: var(--pf-v6-c-toolbar--BackgroundColor);
11826
11832
  }
11827
11833
  .pf-v6-c-toolbar.pf-m-sticky {
11834
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
11828
11835
  position: sticky;
11829
11836
  inset-block-start: 0;
11830
11837
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
@@ -11849,6 +11856,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11849
11856
  --pf-v6-c-toolbar--PaddingInlineStart: var(--pf-v6-c-toolbar--m-page-insets--inset);
11850
11857
  --pf-v6-c-toolbar--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-page-insets--inset);
11851
11858
  }
11859
+ .pf-v6-c-toolbar.pf-m-primary {
11860
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
11861
+ }
11862
+ .pf-v6-c-toolbar.pf-m-secondary {
11863
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-secondary--BackgroundColor);
11864
+ }
11865
+ .pf-v6-c-toolbar.pf-m-no-background {
11866
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
11867
+ }
11852
11868
 
11853
11869
  .pf-v6-c-toolbar__content,
11854
11870
  .pf-v6-c-toolbar__content-section,
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -11900,6 +11900,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11900
11900
  --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
11901
11901
  --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
11902
11902
  --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
11903
+ --pf-v6-c-toolbar--BackgroundColor: transparent;
11904
+ --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11905
+ --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11906
+ --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
11903
11907
  --pf-v6-c-toolbar__item--Width: auto;
11904
11908
  --pf-v6-c-toolbar__item--MinWidth: auto;
11905
11909
  --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -11913,6 +11917,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11913
11917
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11914
11918
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
11915
11919
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
11920
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11916
11921
  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
11917
11922
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
11918
11923
  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-v6-global--Transition);
@@ -11940,8 +11945,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11940
11945
  width: var(--pf-v6-c-toolbar--Width, auto);
11941
11946
  font-size: var(--pf-v6-c-toolbar--FontSize);
11942
11947
  line-height: var(--pf-v6-c-toolbar--LineHeight);
11948
+ background-color: var(--pf-v6-c-toolbar--BackgroundColor);
11943
11949
  }
11944
11950
  .pf-v6-c-toolbar.pf-m-sticky {
11951
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
11945
11952
  position: sticky;
11946
11953
  inset-block-start: 0;
11947
11954
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
@@ -11966,6 +11973,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11966
11973
  --pf-v6-c-toolbar--PaddingInlineStart: var(--pf-v6-c-toolbar--m-page-insets--inset);
11967
11974
  --pf-v6-c-toolbar--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-page-insets--inset);
11968
11975
  }
11976
+ .pf-v6-c-toolbar.pf-m-primary {
11977
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
11978
+ }
11979
+ .pf-v6-c-toolbar.pf-m-secondary {
11980
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-secondary--BackgroundColor);
11981
+ }
11982
+ .pf-v6-c-toolbar.pf-m-no-background {
11983
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
11984
+ }
11969
11985
 
11970
11986
  .pf-v6-c-toolbar__content,
11971
11987
  .pf-v6-c-toolbar__content-section,
package/patternfly.css CHANGED
@@ -11900,6 +11900,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11900
11900
  --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
11901
11901
  --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
11902
11902
  --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
11903
+ --pf-v6-c-toolbar--BackgroundColor: transparent;
11904
+ --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11905
+ --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11906
+ --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
11903
11907
  --pf-v6-c-toolbar__item--Width: auto;
11904
11908
  --pf-v6-c-toolbar__item--MinWidth: auto;
11905
11909
  --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -11913,6 +11917,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11913
11917
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11914
11918
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
11915
11919
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
11920
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11916
11921
  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
11917
11922
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
11918
11923
  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-v6-global--Transition);
@@ -11940,8 +11945,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11940
11945
  width: var(--pf-v6-c-toolbar--Width, auto);
11941
11946
  font-size: var(--pf-v6-c-toolbar--FontSize);
11942
11947
  line-height: var(--pf-v6-c-toolbar--LineHeight);
11948
+ background-color: var(--pf-v6-c-toolbar--BackgroundColor);
11943
11949
  }
11944
11950
  .pf-v6-c-toolbar.pf-m-sticky {
11951
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
11945
11952
  position: sticky;
11946
11953
  inset-block-start: 0;
11947
11954
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
@@ -11966,6 +11973,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11966
11973
  --pf-v6-c-toolbar--PaddingInlineStart: var(--pf-v6-c-toolbar--m-page-insets--inset);
11967
11974
  --pf-v6-c-toolbar--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-page-insets--inset);
11968
11975
  }
11976
+ .pf-v6-c-toolbar.pf-m-primary {
11977
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
11978
+ }
11979
+ .pf-v6-c-toolbar.pf-m-secondary {
11980
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-secondary--BackgroundColor);
11981
+ }
11982
+ .pf-v6-c-toolbar.pf-m-no-background {
11983
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
11984
+ }
11969
11985
 
11970
11986
  .pf-v6-c-toolbar__content,
11971
11987
  .pf-v6-c-toolbar__content-section,