@patternfly/patternfly 6.0.0-alpha.32 → 6.0.0-alpha.34

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 (23) hide show
  1. package/base/patternfly-variables.css +2 -0
  2. package/base/tokens/_tokens-default.scss +2 -0
  3. package/components/Avatar/avatar.css +10 -13
  4. package/components/Avatar/avatar.scss +10 -17
  5. package/components/EmptyState/empty-state.css +57 -34
  6. package/components/EmptyState/empty-state.scss +63 -34
  7. package/components/ExpandableSection/expandable-section.css +10 -17
  8. package/components/ExpandableSection/expandable-section.scss +13 -20
  9. package/docs/components/Avatar/examples/Avatar.md +5 -19
  10. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  11. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  12. package/docs/components/ExpandableSection/examples/ExpandableSection.md +2 -4
  13. package/package.json +1 -1
  14. package/patternfly-base-no-globals-theme-dark-unversioned.css +2 -0
  15. package/patternfly-base-no-globals.css +2 -0
  16. package/patternfly-base-theme-dark-unversioned.css +2 -0
  17. package/patternfly-base.css +2 -0
  18. package/patternfly-no-globals.css +79 -64
  19. package/patternfly-theme-dark-unversioned.css +79 -64
  20. package/patternfly.css +79 -64
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
  23. package/docs/components/Avatar/examples/Avatar.css +0 -3
package/docs/components/EmptyState/examples/EmptyState.md CHANGED
@@ -46,6 +46,9 @@ cssPrefix: pf-v5-c-empty-state
46
46
  <div class="pf-v5-c-empty-state pf-m-xs">
47
47
  <div class="pf-v5-c-empty-state__content">
48
48
  <div class="pf-v5-c-empty-state__header">
49
+ <div class="pf-v5-c-empty-state__icon">
50
+ <i class="fas fa-cubes" aria-hidden="true"></i>
51
+ </div>
49
52
  <div class="pf-v5-c-empty-state__title">
50
53
  <h1 class="pf-v5-c-empty-state__title-text">Empty state</h1>
51
54
  </div>
@@ -53,7 +56,7 @@ cssPrefix: pf-v5-c-empty-state
53
56
 
54
57
  <div
55
58
  class="pf-v5-c-empty-state__body"
56
- >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
59
+ >This represents an the empty state pattern in PatternFly. The icon is optional.</div>
57
60
 
58
61
  <div class="pf-v5-c-empty-state__footer">
59
62
  <div class="pf-v5-c-empty-state__actions">
@@ -190,6 +193,42 @@ cssPrefix: pf-v5-c-empty-state
190
193
 
191
194
  ```
192
195
 
196
+ ### With status
197
+
198
+ ```html
199
+ <div class="pf-v5-c-empty-state pf-m-success">
200
+ <div class="pf-v5-c-empty-state__content">
201
+ <div class="pf-v5-c-empty-state__header">
202
+ <div class="pf-v5-c-empty-state__icon">
203
+ <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
204
+ </div>
205
+ <div class="pf-v5-c-empty-state__title">
206
+ <h1 class="pf-v5-c-empty-state__title-text">You're all set</h1>
207
+ </div>
208
+ </div>
209
+
210
+ <div
211
+ class="pf-v5-c-empty-state__body"
212
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
213
+
214
+ <div class="pf-v5-c-empty-state__footer">
215
+ <div class="pf-v5-c-empty-state__actions">
216
+ <button class="pf-v5-c-button pf-m-primary" type="button">Primary action</button>
217
+ </div>
218
+ <div class="pf-v5-c-empty-state__actions">
219
+ <button class="pf-v5-c-button pf-m-link" type="button">Multiple</button>
220
+ <button class="pf-v5-c-button pf-m-link" type="button">Action buttons</button>
221
+ <button class="pf-v5-c-button pf-m-link" type="button">Can</button>
222
+ <button class="pf-v5-c-button pf-m-link" type="button">Go here</button>
223
+ <button class="pf-v5-c-button pf-m-link" type="button">In the second</button>
224
+ <button class="pf-v5-c-button pf-m-link" type="button">Action area</button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ ```
231
+
193
232
  ## Documentation
194
233
 
195
234
  ### Accessibility
@@ -216,3 +255,8 @@ cssPrefix: pf-v5-c-empty-state
216
255
  | `.pf-m-lg` | `.pf-v5-c-empty-state` | Modifies the empty state for a large max-width. |
217
256
  | `.pf-m-xl` | `.pf-v5-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
218
257
  | `.pf-m-full-height` | `.pf-v5-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-v5-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-v5-c-empty-state` have an implicit or explicit `height` defined. |
258
+ | `.pf-m-danger` | `.pf-v5-c-empty-state` | Modifies the empty state for danger status. |
259
+ | `.pf-m-warning` | `.pf-v5-c-empty-state` | Modifies the empty state for warning status. |
260
+ | `.pf-m-success` | `.pf-v5-c-empty-state` | Modifies the empty state for success status. |
261
+ | `.pf-m-info` | `.pf-v5-c-empty-state` | Modifies the empty state for info status. |
262
+ | `.pf-m-custom` | `.pf-v5-c-empty-state` | Modifies the empty state for custom status. |
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -141,7 +141,7 @@ cssPrefix: pf-v5-c-expandable-section
141
141
  ```html
142
142
  <div class="pf-v5-l-stack pf-m-gutter">
143
143
  <div class="pf-v5-l-stack__item">
144
- <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
144
+ <div class="pf-v5-c-expandable-section pf-m-expanded">
145
145
  <div
146
146
  class="pf-v5-c-expandable-section__content"
147
147
  id="detached-toggle-content"
@@ -150,7 +150,7 @@ cssPrefix: pf-v5-c-expandable-section
150
150
  </div>
151
151
 
152
152
  <div class="pf-v5-l-stack__item">
153
- <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
153
+ <div class="pf-v5-c-expandable-section pf-m-expanded">
154
154
  <button
155
155
  type="button"
156
156
  class="pf-v5-c-expandable-section__toggle"
@@ -228,9 +228,7 @@ cssPrefix: pf-v5-c-expandable-section
228
228
  | `.pf-v5-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
229
229
  | `.pf-m-expanded` | `.pf-v5-c-expandable-section` | Modifies the component for the expanded state. |
230
230
  | `.pf-m-display-lg` | `.pf-v5-c-expandable-section` | Modifies the styling of the component to have large display styling. |
231
- | `.pf-m-detached` | `.pf-v5-c-expandable-section` | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
232
231
  | `.pf-m-indented` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
233
232
  | `.pf-m-truncate` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
234
- | `.pf-m-active` | `.pf-v5-c-expandable-section__toggle` | Forces display of the active state of the toggle. |
235
233
  | `.pf-m-expand-top` | `.pf-v5-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
236
234
  | `--pf-v5-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v5-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |
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.32",
4
+ "version": "6.0.0-alpha.34",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -441,6 +441,7 @@ html .ws-preview {
441
441
  --pf-t--global--border--width--300: 3px;
442
442
  --pf-t--global--border--width--200: 2px;
443
443
  --pf-t--global--border--width--100: 1px;
444
+ --pf-t--global--icon--size--500: 96px;
444
445
  --pf-t--global--icon--size--400: 56px;
445
446
  --pf-t--global--icon--size--300: 22px;
446
447
  --pf-t--global--icon--size--250: 16px;
@@ -557,6 +558,7 @@ html .ws-preview {
557
558
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
558
559
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
559
560
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
561
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
560
562
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
561
563
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
562
564
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/patternfly-base-no-globals.css CHANGED
@@ -441,6 +441,7 @@ html .ws-preview {
441
441
  --pf-t--global--border--width--300: 3px;
442
442
  --pf-t--global--border--width--200: 2px;
443
443
  --pf-t--global--border--width--100: 1px;
444
+ --pf-t--global--icon--size--500: 96px;
444
445
  --pf-t--global--icon--size--400: 56px;
445
446
  --pf-t--global--icon--size--300: 22px;
446
447
  --pf-t--global--icon--size--250: 16px;
@@ -557,6 +558,7 @@ html .ws-preview {
557
558
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
558
559
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
559
560
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
561
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
560
562
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
561
563
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
562
564
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -441,6 +441,7 @@ html .ws-preview {
441
441
  --pf-t--global--border--width--300: 3px;
442
442
  --pf-t--global--border--width--200: 2px;
443
443
  --pf-t--global--border--width--100: 1px;
444
+ --pf-t--global--icon--size--500: 96px;
444
445
  --pf-t--global--icon--size--400: 56px;
445
446
  --pf-t--global--icon--size--300: 22px;
446
447
  --pf-t--global--icon--size--250: 16px;
@@ -557,6 +558,7 @@ html .ws-preview {
557
558
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
558
559
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
559
560
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
561
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
560
562
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
561
563
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
562
564
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/patternfly-base.css CHANGED
@@ -441,6 +441,7 @@ html .ws-preview {
441
441
  --pf-t--global--border--width--300: 3px;
442
442
  --pf-t--global--border--width--200: 2px;
443
443
  --pf-t--global--border--width--100: 1px;
444
+ --pf-t--global--icon--size--500: 96px;
444
445
  --pf-t--global--icon--size--400: 56px;
445
446
  --pf-t--global--icon--size--300: 22px;
446
447
  --pf-t--global--icon--size--250: 16px;
@@ -557,6 +558,7 @@ html .ws-preview {
557
558
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
558
559
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
559
560
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
561
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
560
562
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
561
563
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
562
564
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/patternfly-no-globals.css CHANGED
@@ -499,6 +499,7 @@ html .ws-preview {
499
499
  --pf-t--global--border--width--300: 3px;
500
500
  --pf-t--global--border--width--200: 2px;
501
501
  --pf-t--global--border--width--100: 1px;
502
+ --pf-t--global--icon--size--500: 96px;
502
503
  --pf-t--global--icon--size--400: 56px;
503
504
  --pf-t--global--icon--size--300: 22px;
504
505
  --pf-t--global--icon--size--250: 16px;
@@ -615,6 +616,7 @@ html .ws-preview {
615
616
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
616
617
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
617
618
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
619
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
618
620
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
619
621
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
620
622
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
@@ -7092,10 +7094,10 @@ html .ws-preview {
7092
7094
  --pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-v5-global--palette--gold-100);
7093
7095
  }
7094
7096
 
7095
- .pf-v5-c-avatar {
7097
+ :root, .pf-v5-c-avatar {
7096
7098
  --pf-v5-c-avatar--BorderColor: transparent;
7097
7099
  --pf-v5-c-avatar--BorderWidth: 0;
7098
- --pf-v5-c-avatar--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7100
+ --pf-v5-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
7099
7101
  --pf-v5-c-avatar--Width: 2.25rem;
7100
7102
  --pf-v5-c-avatar--Height: 2.25rem;
7101
7103
  --pf-v5-c-avatar--m-sm--Width: 1.5rem;
@@ -7106,22 +7108,19 @@ html .ws-preview {
7106
7108
  --pf-v5-c-avatar--m-lg--Height: 4.5rem;
7107
7109
  --pf-v5-c-avatar--m-xl--Width: 8rem;
7108
7110
  --pf-v5-c-avatar--m-xl--Height: 8rem;
7109
- --pf-v5-c-avatar--m-light--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
7110
- --pf-v5-c-avatar--m-light--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
7111
- --pf-v5-c-avatar--m-dark--BorderColor: var(--pf-v5-global--palette--black-700);
7112
- --pf-v5-c-avatar--m-dark--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
7111
+ --pf-v5-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
7112
+ --pf-v5-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
7113
+ }
7114
+
7115
+ .pf-v5-c-avatar {
7113
7116
  width: var(--pf-v5-c-avatar--Width);
7114
7117
  height: var(--pf-v5-c-avatar--Height);
7115
7118
  border: var(--pf-v5-c-avatar--BorderWidth) solid var(--pf-v5-c-avatar--BorderColor);
7116
7119
  border-radius: var(--pf-v5-c-avatar--BorderRadius);
7117
7120
  }
7118
- .pf-v5-c-avatar.pf-m-light {
7119
- --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-light--BorderColor);
7120
- --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-light--BorderWidth);
7121
- }
7122
- .pf-v5-c-avatar.pf-m-dark {
7123
- --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-dark--BorderColor);
7124
- --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-dark--BorderWidth);
7121
+ .pf-v5-c-avatar.pf-m-bordered {
7122
+ --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-bordered--BorderColor);
7123
+ --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-bordered--BorderWidth);
7125
7124
  }
7126
7125
  .pf-v5-c-avatar.pf-m-sm {
7127
7126
  --pf-v5-c-avatar--Width: var(--pf-v5-c-avatar--m-sm--Width);
@@ -14794,44 +14793,52 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14794
14793
  background: transparent;
14795
14794
  }
14796
14795
 
14797
- .pf-v5-c-empty-state {
14798
- --pf-v5-c-empty-state--PaddingTop: var(--pf-v5-global--spacer--xl);
14799
- --pf-v5-c-empty-state--PaddingRight: var(--pf-v5-global--spacer--xl);
14800
- --pf-v5-c-empty-state--PaddingBottom: var(--pf-v5-global--spacer--xl);
14801
- --pf-v5-c-empty-state--PaddingLeft: var(--pf-v5-global--spacer--xl);
14802
- --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-v5-global--spacer--md);
14803
- --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-v5-global--spacer--md);
14804
- --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-v5-global--spacer--md);
14805
- --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-v5-global--spacer--md);
14796
+ :root {
14797
+ --pf-v5-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
14798
+ --pf-v5-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
14799
+ --pf-v5-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);
14800
+ --pf-v5-c-empty-state--PaddingLeft: var(--pf-t--global--spacer--xl);
14801
+ --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
14802
+ --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
14803
+ --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
14804
+ --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
14806
14805
  --pf-v5-c-empty-state__content--MaxWidth: none;
14807
14806
  --pf-v5-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
14808
14807
  --pf-v5-c-empty-state--m-sm__content--MaxWidth: 25rem;
14809
14808
  --pf-v5-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14810
- --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-v5-global--spacer--lg);
14811
- --pf-v5-c-empty-state__icon--FontSize: var(--pf-v5-global--icon--FontSize--xl);
14812
- --pf-v5-c-empty-state__icon--Color: var(--pf-v5-global--icon--Color--light);
14813
- --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
14814
- --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
14815
- --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
14816
- --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
14817
- --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
14818
- --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
14819
- --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
14820
- --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-v5-global--FontSize--md);
14821
- --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-v5-global--FontSize--4xl);
14822
- --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
14823
- --pf-v5-c-empty-state__body--MarginTop: var(--pf-v5-global--spacer--md);
14824
- --pf-v5-c-empty-state__body--Color: var(--pf-v5-global--Color--200);
14825
- --pf-v5-c-empty-state--body--FontSize: var(--pf-v5-global--FontSize--md);
14826
- --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-v5-global--FontSize--sm);
14827
- --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-v5-global--spacer--md);
14828
- --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-v5-global--FontSize--xl);
14829
- --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-v5-global--spacer--lg);
14830
- --pf-v5-c-empty-state__footer--RowGap: var(--pf-v5-global--spacer--sm);
14831
- --pf-v5-c-empty-state__footer--MarginTop: var(--pf-v5-global--spacer--xl);
14832
- --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-v5-global--spacer--md);
14833
- --pf-v5-c-empty-state__actions--RowGap: var(--pf-v5-global--spacer--xs);
14834
- --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-v5-global--spacer--xs);
14809
+ --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-t--global--spacer--lg);
14810
+ --pf-v5-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
14811
+ --pf-v5-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
14812
+ --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
14813
+ --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
14814
+ --pf-v5-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
14815
+ --pf-v5-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
14816
+ --pf-v5-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
14817
+ --pf-v5-c-empty-state--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
14818
+ --pf-v5-c-empty-state--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
14819
+ --pf-v5-c-empty-state--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
14820
+ --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-t--global--font--family--heading);
14821
+ --pf-v5-c-empty-state__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
14822
+ --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
14823
+ --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
14824
+ --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
14825
+ --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
14826
+ --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
14827
+ --pf-v5-c-empty-state__body--MarginTop: var(--pf-t--global--spacer--md);
14828
+ --pf-v5-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
14829
+ --pf-v5-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
14830
+ --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
14831
+ --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
14832
+ --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
14833
+ --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
14834
+ --pf-v5-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
14835
+ --pf-v5-c-empty-state__footer--MarginTop: var(--pf-t--global--spacer--xl);
14836
+ --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
14837
+ --pf-v5-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
14838
+ --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
14839
+ }
14840
+
14841
+ .pf-v5-c-empty-state {
14835
14842
  display: flex;
14836
14843
  align-items: center;
14837
14844
  justify-content: center;
@@ -14870,6 +14877,21 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14870
14877
  .pf-v5-c-empty-state.pf-m-full-height {
14871
14878
  height: 100%;
14872
14879
  }
14880
+ .pf-v5-c-empty-state.pf-m-danger {
14881
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-danger__icon--Color);
14882
+ }
14883
+ .pf-v5-c-empty-state.pf-m-warning {
14884
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-warning__icon--Color);
14885
+ }
14886
+ .pf-v5-c-empty-state.pf-m-success {
14887
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-success__icon--Color);
14888
+ }
14889
+ .pf-v5-c-empty-state.pf-m-info {
14890
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-info__icon--Color);
14891
+ }
14892
+ .pf-v5-c-empty-state.pf-m-custom {
14893
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-custom__icon--Color);
14894
+ }
14873
14895
 
14874
14896
  .pf-v5-c-empty-state__content {
14875
14897
  max-width: var(--pf-v5-c-empty-state__content--MaxWidth);
@@ -14915,11 +14937,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14915
14937
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
14916
14938
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
14917
14939
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
14918
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
14919
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
14920
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
14921
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
14922
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
14923
14940
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
14924
14941
  --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
14925
14942
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
@@ -14929,6 +14946,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14929
14946
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
14930
14947
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
14931
14948
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
14949
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
14950
+ --pf-v5-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
14951
+ --pf-v5-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
14932
14952
  --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
14933
14953
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
14934
14954
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -14963,7 +14983,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14963
14983
  }
14964
14984
 
14965
14985
  .pf-v5-c-expandable-section.pf-m-expanded {
14966
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
14986
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section--m-expanded__toggle-text--Color);
14967
14987
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
14968
14988
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
14969
14989
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
@@ -15018,23 +15038,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15018
15038
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
15019
15039
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
15020
15040
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
15021
- color: var(--pf-v5-c-expandable-section__toggle--Color);
15022
15041
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
15023
15042
  border: none;
15024
15043
  border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
15025
15044
  }
15026
- .pf-v5-c-expandable-section__toggle:hover {
15027
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
15045
+ .pf-v5-c-expandable-section__toggle:is(:hover, :focus) {
15046
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section__toggle-text--hover--Color);
15028
15047
  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
15029
15048
  }
15030
- .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
15031
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
15032
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
15033
- }
15034
- .pf-v5-c-expandable-section__toggle:focus {
15035
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
15036
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
15037
- }
15038
15049
 
15039
15050
  .pf-v5-c-expandable-section__toggle-icon {
15040
15051
  min-width: var(--pf-v5-c-expandable-section__toggle-icon--MinWidth);
@@ -15050,6 +15061,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15050
15061
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
15051
15062
  }
15052
15063
 
15064
+ .pf-v5-c-expandable-section__toggle-text {
15065
+ color: var(--pf-v5-c-expandable-section__toggle-text--Color);
15066
+ }
15067
+
15053
15068
  .pf-v5-c-expandable-section__content {
15054
15069
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
15055
15070
  padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);