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

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 (30) 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/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  16. package/docs/utilities/Text/examples/Text.md +63 -61
  17. package/package.json +1 -1
  18. package/patternfly-addons.css +429 -764
  19. package/patternfly-no-globals.css +16 -0
  20. package/patternfly-theme-dark-unversioned.css +16 -0
  21. package/patternfly.css +16 -0
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
  24. package/utilities/BackgroundColor/BackgroundColor.css +36 -283
  25. package/utilities/BackgroundColor/BackgroundColor.scss +6 -45
  26. package/utilities/Text/text.css +393 -481
  27. package/utilities/Text/text.scss +69 -90
  28. package/docs/components/Tabs/examples/Tabs.css +0 -10
  29. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  30. package/docs/utilities/Text/examples/Text.css +0 -0
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/docs/utilities/BackgroundColor/examples/BackgroundColor.md CHANGED
@@ -6,66 +6,15 @@ section: utility-classes
6
6
  ### Standard background colors
7
7
 
8
8
  ```html
9
- <div class="pf-v6-u-background-color-100">Background color 100</div>
10
- <br />
11
- <div class="pf-v6-u-background-color-200">Background color 200</div>
12
- <br />
13
- <div class="pf-v6-u-background-color-active-color-100">
14
- <div class="pf-v6-u-color-light-200">Active color 100</div>
15
- </div>
16
- <br />
17
- <div class="pf-v6-u-background-color-active-color-300">
18
- <div class="pf-v6-u-color-light-200">Active color 300</div>
19
- </div>
20
- <br />
21
- <div class="pf-v6-u-background-color-primary-color-200">
22
- <div class="pf-v6-u-color-light-200">Primary color 200</div>
23
- </div>
24
-
25
- ```
26
-
27
- ### Inverse background colors
28
-
29
- ```html
30
- <div class="pf-v6-u-background-color-dark-100">
31
- <div class="pf-v6-u-color-light-200">Background color dark 100</div>
32
- </div>
33
- <br />
34
- <div class="pf-v6-u-background-color-dark-200">
35
- <div class="pf-v6-u-color-light-200">Background color dark 200</div>
36
- </div>
37
- <br />
38
- <div class="pf-v6-u-background-color-dark-300">
39
- <div class="pf-v6-u-color-light-200">Background color dark 300</div>
9
+ <div class="pf-v6-u-background-color-disabled">
10
+ <div class="pf-v6-u-text-color-on-disabled">Disabled background color</div>
40
11
  </div>
41
12
  <br />
42
- <div class="pf-v6-u-background-color-dark-400">
43
- <div class="pf-v6-u-color-light-200">Background color dark 400</div>
13
+ <div class="pf-v6-u-background-color-inverse">
14
+ <div class="pf-v6-u-text-color-inverse">Inverse background color</div>
44
15
  </div>
45
-
46
- ```
47
-
48
- ### Disabled background colors
49
-
50
- ```html
51
- <div class="pf-v6-u-background-color-disabled-color-200">Disabled color 200</div>
52
- <br />
53
- <div class="pf-v6-u-background-color-disabled-color-300">Disabled color 300</div>
54
-
55
- ```
56
-
57
- ### Status and state background colors
58
-
59
- ```html
60
- <div class="pf-v6-u-background-color-default">Default</div>
61
- <br />
62
- <div class="pf-v6-u-background-color-success">Success</div>
63
- <br />
64
- <div class="pf-v6-u-background-color-info">Info</div>
65
- <br />
66
- <div class="pf-v6-u-background-color-warning">Warning</div>
67
16
  <br />
68
- <div class="pf-v6-u-background-color-danger">Danger</div>
17
+ <div class="pf-v6-u-background-color-highlight">Highlight background color</div>
69
18
 
70
19
  ```
71
20
 
@@ -79,19 +28,10 @@ Care should be taken especially when applying background colors, as this can hav
79
28
 
80
29
  Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utility-classes/text#inverse-colors).
81
30
 
82
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-background-color-200-on-lg**
31
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-background-color-disabled-on-lg**
83
32
 
84
33
  ### Usage
85
34
 
86
35
  | Class | Applied to | Outcome |
87
36
  | --------------------------------- | ---------- | ---------------------------------- |
88
- | `.pf-v6-u-background-color-{100, 200}{-on-[breakpoint]}` | `*` | Applies background color 100 or 200. |
89
- | `.pf-v6-u-background-color-active-color-{100, 300}{-on-[breakpoint]}` | `*` | Applies background color active 100 or 300. |
90
- | `.pf-v6-u-background-color-primary-color-200{-on-[breakpoint]}` | `*` | Applies background color primary 200. |
91
- | `.pf-v6-u-background-color-dark-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Applies background color dark 100, 200, 300, or 400. |
92
- | `.pf-v6-u-background-color-disabled-color-{200, 300}{-on-[breakpoint]}` | `*` | Applies background color disabled 200 or 300. |
93
- | `.pf-v6-u-background-color-default{-on-[breakpoint]}` | `*` | Applies the background color for the default state. |
94
- | `.pf-v6-u-background-color-success{-on-[breakpoint]}` | `*` | Applies the background color for the success state. |
95
- | `.pf-v6-u-background-color-info{-on-[breakpoint]}` | `*` | Applies the background color for the info state. |
96
- | `.pf-v6-u-background-color-warning{-on-[breakpoint]}` | `*` | Applies the background color for the warning state. |
97
- | `.pf-v6-u-background-color-danger{-on-[breakpoint]}` | `*` | Applies the background color for the danger state. |
37
+ | `.pf-v6-u-background-color-{disabled, inverse, highlight}{-on-[breakpoint]}` | `*` | Applies background color |