@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/patternfly-theme-dark-unversioned.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);
@@ -7209,10 +7211,10 @@ button) {
7209
7211
  --pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-v5-global--palette--gold-100);
7210
7212
  }
7211
7213
 
7212
- .pf-v5-c-avatar {
7214
+ :root, .pf-v5-c-avatar {
7213
7215
  --pf-v5-c-avatar--BorderColor: transparent;
7214
7216
  --pf-v5-c-avatar--BorderWidth: 0;
7215
- --pf-v5-c-avatar--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7217
+ --pf-v5-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
7216
7218
  --pf-v5-c-avatar--Width: 2.25rem;
7217
7219
  --pf-v5-c-avatar--Height: 2.25rem;
7218
7220
  --pf-v5-c-avatar--m-sm--Width: 1.5rem;
@@ -7223,22 +7225,19 @@ button) {
7223
7225
  --pf-v5-c-avatar--m-lg--Height: 4.5rem;
7224
7226
  --pf-v5-c-avatar--m-xl--Width: 8rem;
7225
7227
  --pf-v5-c-avatar--m-xl--Height: 8rem;
7226
- --pf-v5-c-avatar--m-light--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
7227
- --pf-v5-c-avatar--m-light--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
7228
- --pf-v5-c-avatar--m-dark--BorderColor: var(--pf-v5-global--palette--black-700);
7229
- --pf-v5-c-avatar--m-dark--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
7228
+ --pf-v5-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
7229
+ --pf-v5-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
7230
+ }
7231
+
7232
+ .pf-v5-c-avatar {
7230
7233
  width: var(--pf-v5-c-avatar--Width);
7231
7234
  height: var(--pf-v5-c-avatar--Height);
7232
7235
  border: var(--pf-v5-c-avatar--BorderWidth) solid var(--pf-v5-c-avatar--BorderColor);
7233
7236
  border-radius: var(--pf-v5-c-avatar--BorderRadius);
7234
7237
  }
7235
- .pf-v5-c-avatar.pf-m-light {
7236
- --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-light--BorderColor);
7237
- --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-light--BorderWidth);
7238
- }
7239
- .pf-v5-c-avatar.pf-m-dark {
7240
- --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-dark--BorderColor);
7241
- --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-dark--BorderWidth);
7238
+ .pf-v5-c-avatar.pf-m-bordered {
7239
+ --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-bordered--BorderColor);
7240
+ --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-bordered--BorderWidth);
7242
7241
  }
7243
7242
  .pf-v5-c-avatar.pf-m-sm {
7244
7243
  --pf-v5-c-avatar--Width: var(--pf-v5-c-avatar--m-sm--Width);
@@ -14911,44 +14910,52 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14911
14910
  background: transparent;
14912
14911
  }
14913
14912
 
14914
- .pf-v5-c-empty-state {
14915
- --pf-v5-c-empty-state--PaddingTop: var(--pf-v5-global--spacer--xl);
14916
- --pf-v5-c-empty-state--PaddingRight: var(--pf-v5-global--spacer--xl);
14917
- --pf-v5-c-empty-state--PaddingBottom: var(--pf-v5-global--spacer--xl);
14918
- --pf-v5-c-empty-state--PaddingLeft: var(--pf-v5-global--spacer--xl);
14919
- --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-v5-global--spacer--md);
14920
- --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-v5-global--spacer--md);
14921
- --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-v5-global--spacer--md);
14922
- --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-v5-global--spacer--md);
14913
+ :root {
14914
+ --pf-v5-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
14915
+ --pf-v5-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
14916
+ --pf-v5-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);
14917
+ --pf-v5-c-empty-state--PaddingLeft: var(--pf-t--global--spacer--xl);
14918
+ --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
14919
+ --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
14920
+ --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
14921
+ --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
14923
14922
  --pf-v5-c-empty-state__content--MaxWidth: none;
14924
14923
  --pf-v5-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
14925
14924
  --pf-v5-c-empty-state--m-sm__content--MaxWidth: 25rem;
14926
14925
  --pf-v5-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14927
- --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-v5-global--spacer--lg);
14928
- --pf-v5-c-empty-state__icon--FontSize: var(--pf-v5-global--icon--FontSize--xl);
14929
- --pf-v5-c-empty-state__icon--Color: var(--pf-v5-global--icon--Color--light);
14930
- --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
14931
- --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
14932
- --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
14933
- --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
14934
- --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
14935
- --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
14936
- --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
14937
- --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-v5-global--FontSize--md);
14938
- --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-v5-global--FontSize--4xl);
14939
- --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
14940
- --pf-v5-c-empty-state__body--MarginTop: var(--pf-v5-global--spacer--md);
14941
- --pf-v5-c-empty-state__body--Color: var(--pf-v5-global--Color--200);
14942
- --pf-v5-c-empty-state--body--FontSize: var(--pf-v5-global--FontSize--md);
14943
- --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-v5-global--FontSize--sm);
14944
- --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-v5-global--spacer--md);
14945
- --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-v5-global--FontSize--xl);
14946
- --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-v5-global--spacer--lg);
14947
- --pf-v5-c-empty-state__footer--RowGap: var(--pf-v5-global--spacer--sm);
14948
- --pf-v5-c-empty-state__footer--MarginTop: var(--pf-v5-global--spacer--xl);
14949
- --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-v5-global--spacer--md);
14950
- --pf-v5-c-empty-state__actions--RowGap: var(--pf-v5-global--spacer--xs);
14951
- --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-v5-global--spacer--xs);
14926
+ --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-t--global--spacer--lg);
14927
+ --pf-v5-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
14928
+ --pf-v5-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
14929
+ --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
14930
+ --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
14931
+ --pf-v5-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
14932
+ --pf-v5-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
14933
+ --pf-v5-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
14934
+ --pf-v5-c-empty-state--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
14935
+ --pf-v5-c-empty-state--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
14936
+ --pf-v5-c-empty-state--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
14937
+ --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-t--global--font--family--heading);
14938
+ --pf-v5-c-empty-state__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
14939
+ --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
14940
+ --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
14941
+ --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
14942
+ --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
14943
+ --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
14944
+ --pf-v5-c-empty-state__body--MarginTop: var(--pf-t--global--spacer--md);
14945
+ --pf-v5-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
14946
+ --pf-v5-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
14947
+ --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
14948
+ --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
14949
+ --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
14950
+ --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
14951
+ --pf-v5-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
14952
+ --pf-v5-c-empty-state__footer--MarginTop: var(--pf-t--global--spacer--xl);
14953
+ --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
14954
+ --pf-v5-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
14955
+ --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
14956
+ }
14957
+
14958
+ .pf-v5-c-empty-state {
14952
14959
  display: flex;
14953
14960
  align-items: center;
14954
14961
  justify-content: center;
@@ -14987,6 +14994,21 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14987
14994
  .pf-v5-c-empty-state.pf-m-full-height {
14988
14995
  height: 100%;
14989
14996
  }
14997
+ .pf-v5-c-empty-state.pf-m-danger {
14998
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-danger__icon--Color);
14999
+ }
15000
+ .pf-v5-c-empty-state.pf-m-warning {
15001
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-warning__icon--Color);
15002
+ }
15003
+ .pf-v5-c-empty-state.pf-m-success {
15004
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-success__icon--Color);
15005
+ }
15006
+ .pf-v5-c-empty-state.pf-m-info {
15007
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-info__icon--Color);
15008
+ }
15009
+ .pf-v5-c-empty-state.pf-m-custom {
15010
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-custom__icon--Color);
15011
+ }
14990
15012
 
14991
15013
  .pf-v5-c-empty-state__content {
14992
15014
  max-width: var(--pf-v5-c-empty-state__content--MaxWidth);
@@ -15032,11 +15054,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15032
15054
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
15033
15055
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15034
15056
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
15035
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
15036
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
15037
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
15038
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
15039
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
15040
15057
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
15041
15058
  --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
15042
15059
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
@@ -15046,6 +15063,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15046
15063
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
15047
15064
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
15048
15065
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15066
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
15067
+ --pf-v5-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
15068
+ --pf-v5-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
15049
15069
  --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
15050
15070
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
15051
15071
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -15080,7 +15100,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15080
15100
  }
15081
15101
 
15082
15102
  .pf-v5-c-expandable-section.pf-m-expanded {
15083
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
15103
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section--m-expanded__toggle-text--Color);
15084
15104
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
15085
15105
  --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);
15086
15106
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
@@ -15135,23 +15155,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15135
15155
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
15136
15156
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
15137
15157
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
15138
- color: var(--pf-v5-c-expandable-section__toggle--Color);
15139
15158
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
15140
15159
  border: none;
15141
15160
  border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
15142
15161
  }
15143
- .pf-v5-c-expandable-section__toggle:hover {
15144
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
15162
+ .pf-v5-c-expandable-section__toggle:is(:hover, :focus) {
15163
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section__toggle-text--hover--Color);
15145
15164
  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
15146
15165
  }
15147
- .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
15148
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
15149
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
15150
- }
15151
- .pf-v5-c-expandable-section__toggle:focus {
15152
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
15153
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
15154
- }
15155
15166
 
15156
15167
  .pf-v5-c-expandable-section__toggle-icon {
15157
15168
  min-width: var(--pf-v5-c-expandable-section__toggle-icon--MinWidth);
@@ -15167,6 +15178,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15167
15178
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
15168
15179
  }
15169
15180
 
15181
+ .pf-v5-c-expandable-section__toggle-text {
15182
+ color: var(--pf-v5-c-expandable-section__toggle-text--Color);
15183
+ }
15184
+
15170
15185
  .pf-v5-c-expandable-section__content {
15171
15186
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
15172
15187
  padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
package/patternfly.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);
@@ -7209,10 +7211,10 @@ button) {
7209
7211
  --pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-v5-global--palette--gold-100);
7210
7212
  }
7211
7213
 
7212
- .pf-v5-c-avatar {
7214
+ :root, .pf-v5-c-avatar {
7213
7215
  --pf-v5-c-avatar--BorderColor: transparent;
7214
7216
  --pf-v5-c-avatar--BorderWidth: 0;
7215
- --pf-v5-c-avatar--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7217
+ --pf-v5-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
7216
7218
  --pf-v5-c-avatar--Width: 2.25rem;
7217
7219
  --pf-v5-c-avatar--Height: 2.25rem;
7218
7220
  --pf-v5-c-avatar--m-sm--Width: 1.5rem;
@@ -7223,22 +7225,19 @@ button) {
7223
7225
  --pf-v5-c-avatar--m-lg--Height: 4.5rem;
7224
7226
  --pf-v5-c-avatar--m-xl--Width: 8rem;
7225
7227
  --pf-v5-c-avatar--m-xl--Height: 8rem;
7226
- --pf-v5-c-avatar--m-light--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
7227
- --pf-v5-c-avatar--m-light--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
7228
- --pf-v5-c-avatar--m-dark--BorderColor: var(--pf-v5-global--palette--black-700);
7229
- --pf-v5-c-avatar--m-dark--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
7228
+ --pf-v5-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
7229
+ --pf-v5-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
7230
+ }
7231
+
7232
+ .pf-v5-c-avatar {
7230
7233
  width: var(--pf-v5-c-avatar--Width);
7231
7234
  height: var(--pf-v5-c-avatar--Height);
7232
7235
  border: var(--pf-v5-c-avatar--BorderWidth) solid var(--pf-v5-c-avatar--BorderColor);
7233
7236
  border-radius: var(--pf-v5-c-avatar--BorderRadius);
7234
7237
  }
7235
- .pf-v5-c-avatar.pf-m-light {
7236
- --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-light--BorderColor);
7237
- --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-light--BorderWidth);
7238
- }
7239
- .pf-v5-c-avatar.pf-m-dark {
7240
- --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-dark--BorderColor);
7241
- --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-dark--BorderWidth);
7238
+ .pf-v5-c-avatar.pf-m-bordered {
7239
+ --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-bordered--BorderColor);
7240
+ --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-bordered--BorderWidth);
7242
7241
  }
7243
7242
  .pf-v5-c-avatar.pf-m-sm {
7244
7243
  --pf-v5-c-avatar--Width: var(--pf-v5-c-avatar--m-sm--Width);
@@ -14911,44 +14910,52 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14911
14910
  background: transparent;
14912
14911
  }
14913
14912
 
14914
- .pf-v5-c-empty-state {
14915
- --pf-v5-c-empty-state--PaddingTop: var(--pf-v5-global--spacer--xl);
14916
- --pf-v5-c-empty-state--PaddingRight: var(--pf-v5-global--spacer--xl);
14917
- --pf-v5-c-empty-state--PaddingBottom: var(--pf-v5-global--spacer--xl);
14918
- --pf-v5-c-empty-state--PaddingLeft: var(--pf-v5-global--spacer--xl);
14919
- --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-v5-global--spacer--md);
14920
- --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-v5-global--spacer--md);
14921
- --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-v5-global--spacer--md);
14922
- --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-v5-global--spacer--md);
14913
+ :root {
14914
+ --pf-v5-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
14915
+ --pf-v5-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
14916
+ --pf-v5-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);
14917
+ --pf-v5-c-empty-state--PaddingLeft: var(--pf-t--global--spacer--xl);
14918
+ --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
14919
+ --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
14920
+ --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
14921
+ --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
14923
14922
  --pf-v5-c-empty-state__content--MaxWidth: none;
14924
14923
  --pf-v5-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
14925
14924
  --pf-v5-c-empty-state--m-sm__content--MaxWidth: 25rem;
14926
14925
  --pf-v5-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14927
- --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-v5-global--spacer--lg);
14928
- --pf-v5-c-empty-state__icon--FontSize: var(--pf-v5-global--icon--FontSize--xl);
14929
- --pf-v5-c-empty-state__icon--Color: var(--pf-v5-global--icon--Color--light);
14930
- --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
14931
- --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
14932
- --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
14933
- --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
14934
- --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
14935
- --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
14936
- --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
14937
- --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-v5-global--FontSize--md);
14938
- --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-v5-global--FontSize--4xl);
14939
- --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
14940
- --pf-v5-c-empty-state__body--MarginTop: var(--pf-v5-global--spacer--md);
14941
- --pf-v5-c-empty-state__body--Color: var(--pf-v5-global--Color--200);
14942
- --pf-v5-c-empty-state--body--FontSize: var(--pf-v5-global--FontSize--md);
14943
- --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-v5-global--FontSize--sm);
14944
- --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-v5-global--spacer--md);
14945
- --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-v5-global--FontSize--xl);
14946
- --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-v5-global--spacer--lg);
14947
- --pf-v5-c-empty-state__footer--RowGap: var(--pf-v5-global--spacer--sm);
14948
- --pf-v5-c-empty-state__footer--MarginTop: var(--pf-v5-global--spacer--xl);
14949
- --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-v5-global--spacer--md);
14950
- --pf-v5-c-empty-state__actions--RowGap: var(--pf-v5-global--spacer--xs);
14951
- --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-v5-global--spacer--xs);
14926
+ --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-t--global--spacer--lg);
14927
+ --pf-v5-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
14928
+ --pf-v5-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
14929
+ --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
14930
+ --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
14931
+ --pf-v5-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
14932
+ --pf-v5-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
14933
+ --pf-v5-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
14934
+ --pf-v5-c-empty-state--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
14935
+ --pf-v5-c-empty-state--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
14936
+ --pf-v5-c-empty-state--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
14937
+ --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-t--global--font--family--heading);
14938
+ --pf-v5-c-empty-state__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
14939
+ --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
14940
+ --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
14941
+ --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
14942
+ --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
14943
+ --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
14944
+ --pf-v5-c-empty-state__body--MarginTop: var(--pf-t--global--spacer--md);
14945
+ --pf-v5-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
14946
+ --pf-v5-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
14947
+ --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
14948
+ --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
14949
+ --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
14950
+ --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
14951
+ --pf-v5-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
14952
+ --pf-v5-c-empty-state__footer--MarginTop: var(--pf-t--global--spacer--xl);
14953
+ --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
14954
+ --pf-v5-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
14955
+ --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
14956
+ }
14957
+
14958
+ .pf-v5-c-empty-state {
14952
14959
  display: flex;
14953
14960
  align-items: center;
14954
14961
  justify-content: center;
@@ -14987,6 +14994,21 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14987
14994
  .pf-v5-c-empty-state.pf-m-full-height {
14988
14995
  height: 100%;
14989
14996
  }
14997
+ .pf-v5-c-empty-state.pf-m-danger {
14998
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-danger__icon--Color);
14999
+ }
15000
+ .pf-v5-c-empty-state.pf-m-warning {
15001
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-warning__icon--Color);
15002
+ }
15003
+ .pf-v5-c-empty-state.pf-m-success {
15004
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-success__icon--Color);
15005
+ }
15006
+ .pf-v5-c-empty-state.pf-m-info {
15007
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-info__icon--Color);
15008
+ }
15009
+ .pf-v5-c-empty-state.pf-m-custom {
15010
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-custom__icon--Color);
15011
+ }
14990
15012
 
14991
15013
  .pf-v5-c-empty-state__content {
14992
15014
  max-width: var(--pf-v5-c-empty-state__content--MaxWidth);
@@ -15032,11 +15054,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15032
15054
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
15033
15055
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15034
15056
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
15035
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
15036
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
15037
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
15038
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
15039
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
15040
15057
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
15041
15058
  --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
15042
15059
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
@@ -15046,6 +15063,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15046
15063
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
15047
15064
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
15048
15065
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15066
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
15067
+ --pf-v5-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
15068
+ --pf-v5-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
15049
15069
  --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
15050
15070
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
15051
15071
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -15080,7 +15100,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15080
15100
  }
15081
15101
 
15082
15102
  .pf-v5-c-expandable-section.pf-m-expanded {
15083
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
15103
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section--m-expanded__toggle-text--Color);
15084
15104
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
15085
15105
  --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);
15086
15106
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
@@ -15135,23 +15155,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15135
15155
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
15136
15156
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
15137
15157
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
15138
- color: var(--pf-v5-c-expandable-section__toggle--Color);
15139
15158
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
15140
15159
  border: none;
15141
15160
  border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
15142
15161
  }
15143
- .pf-v5-c-expandable-section__toggle:hover {
15144
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
15162
+ .pf-v5-c-expandable-section__toggle:is(:hover, :focus) {
15163
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section__toggle-text--hover--Color);
15145
15164
  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
15146
15165
  }
15147
- .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
15148
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
15149
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
15150
- }
15151
- .pf-v5-c-expandable-section__toggle:focus {
15152
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
15153
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
15154
- }
15155
15166
 
15156
15167
  .pf-v5-c-expandable-section__toggle-icon {
15157
15168
  min-width: var(--pf-v5-c-expandable-section__toggle-icon--MinWidth);
@@ -15167,6 +15178,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15167
15178
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
15168
15179
  }
15169
15180
 
15181
+ .pf-v5-c-expandable-section__toggle-text {
15182
+ color: var(--pf-v5-c-expandable-section__toggle-text--Color);
15183
+ }
15184
+
15170
15185
  .pf-v5-c-expandable-section__content {
15171
15186
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
15172
15187
  padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);