@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/base/patternfly-variables.css CHANGED
@@ -414,6 +414,7 @@ html .ws-preview {
414
414
  --pf-t--global--border--width--300: 3px;
415
415
  --pf-t--global--border--width--200: 2px;
416
416
  --pf-t--global--border--width--100: 1px;
417
+ --pf-t--global--icon--size--500: 96px;
417
418
  --pf-t--global--icon--size--400: 56px;
418
419
  --pf-t--global--icon--size--300: 22px;
419
420
  --pf-t--global--icon--size--250: 16px;
@@ -530,6 +531,7 @@ html .ws-preview {
530
531
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
531
532
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
532
533
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
534
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
533
535
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
534
536
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
535
537
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/base/tokens/_tokens-default.scss CHANGED
@@ -29,6 +29,7 @@
29
29
  --pf-t--global--border--width--300: 3px;
30
30
  --pf-t--global--border--width--200: 2px;
31
31
  --pf-t--global--border--width--100: 1px;
32
+ --pf-t--global--icon--size--500: 96px;
32
33
  --pf-t--global--icon--size--400: 56px;
33
34
  --pf-t--global--icon--size--300: 22px;
34
35
  --pf-t--global--icon--size--250: 16px;
@@ -145,6 +146,7 @@
145
146
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
146
147
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
147
148
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
149
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
148
150
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
149
151
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
150
152
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
package/components/Avatar/avatar.css CHANGED
@@ -1,7 +1,7 @@
1
- .pf-v5-c-avatar {
1
+ :root, .pf-v5-c-avatar {
2
2
  --pf-v5-c-avatar--BorderColor: transparent;
3
3
  --pf-v5-c-avatar--BorderWidth: 0;
4
- --pf-v5-c-avatar--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
4
+ --pf-v5-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
5
5
  --pf-v5-c-avatar--Width: 2.25rem;
6
6
  --pf-v5-c-avatar--Height: 2.25rem;
7
7
  --pf-v5-c-avatar--m-sm--Width: 1.5rem;
@@ -12,22 +12,19 @@
12
12
  --pf-v5-c-avatar--m-lg--Height: 4.5rem;
13
13
  --pf-v5-c-avatar--m-xl--Width: 8rem;
14
14
  --pf-v5-c-avatar--m-xl--Height: 8rem;
15
- --pf-v5-c-avatar--m-light--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
16
- --pf-v5-c-avatar--m-light--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
17
- --pf-v5-c-avatar--m-dark--BorderColor: var(--pf-v5-global--palette--black-700);
18
- --pf-v5-c-avatar--m-dark--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
15
+ --pf-v5-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
16
+ --pf-v5-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
17
+ }
18
+
19
+ .pf-v5-c-avatar {
19
20
  width: var(--pf-v5-c-avatar--Width);
20
21
  height: var(--pf-v5-c-avatar--Height);
21
22
  border: var(--pf-v5-c-avatar--BorderWidth) solid var(--pf-v5-c-avatar--BorderColor);
22
23
  border-radius: var(--pf-v5-c-avatar--BorderRadius);
23
24
  }
24
- .pf-v5-c-avatar.pf-m-light {
25
- --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-light--BorderColor);
26
- --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-light--BorderWidth);
27
- }
28
- .pf-v5-c-avatar.pf-m-dark {
29
- --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-dark--BorderColor);
30
- --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-dark--BorderWidth);
25
+ .pf-v5-c-avatar.pf-m-bordered {
26
+ --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-bordered--BorderColor);
27
+ --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-bordered--BorderWidth);
31
28
  }
32
29
  .pf-v5-c-avatar.pf-m-sm {
33
30
  --pf-v5-c-avatar--Width: var(--pf-v5-c-avatar--m-sm--Width);
package/components/Avatar/avatar.scss CHANGED
@@ -2,10 +2,10 @@
2
2
  $pf-v5-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
3
3
  $pf-v5-c-avatar--sizes: "sm", "md", "lg", "xl";
4
4
 
5
- .#{$avatar} {
5
+ :root, .#{$avatar} {
6
6
  --#{$avatar}--BorderColor: transparent;
7
7
  --#{$avatar}--BorderWidth: 0;
8
- --#{$avatar}--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
8
+ --#{$avatar}--BorderRadius: var(--pf-t--global--border--radius--pill);
9
9
  --#{$avatar}--Width: #{pf-size-prem(36px)};
10
10
  --#{$avatar}--Height: #{pf-size-prem(36px)};
11
11
  --#{$avatar}--m-sm--Width: #{pf-size-prem(24px)};
@@ -17,27 +17,20 @@ $pf-v5-c-avatar--sizes: "sm", "md", "lg", "xl";
17
17
  --#{$avatar}--m-xl--Width: #{pf-size-prem(128px)};
18
18
  --#{$avatar}--m-xl--Height: #{pf-size-prem(128px)};
19
19
 
20
- // Light
21
- --#{$avatar}--m-light--BorderColor: var(--#{$pf-global}--BorderColor--dark-100);
22
- --#{$avatar}--m-light--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
23
-
24
- // Dark
25
- --#{$avatar}--m-dark--BorderColor: var(--#{$pf-global}--palette--black-700);
26
- --#{$avatar}--m-dark--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
20
+ // Bordered
21
+ --#{$avatar}--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
22
+ --#{$avatar}--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
23
+ }
27
24
 
25
+ .#{$avatar} {
28
26
  width: var(--#{$avatar}--Width);
29
27
  height: var(--#{$avatar}--Height);
30
28
  border: var(--#{$avatar}--BorderWidth) solid var(--#{$avatar}--BorderColor);
31
29
  border-radius: var(--#{$avatar}--BorderRadius);
32
30
 
33
- &.pf-m-light {
34
- --#{$avatar}--BorderColor: var(--#{$avatar}--m-light--BorderColor);
35
- --#{$avatar}--BorderWidth: var(--#{$avatar}--m-light--BorderWidth);
36
- }
37
-
38
- &.pf-m-dark {
39
- --#{$avatar}--BorderColor: var(--#{$avatar}--m-dark--BorderColor);
40
- --#{$avatar}--BorderWidth: var(--#{$avatar}--m-dark--BorderWidth);
31
+ &.pf-m-bordered {
32
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-bordered--BorderColor);
33
+ --#{$avatar}--BorderWidth: var(--#{$avatar}--m-bordered--BorderWidth);
41
34
  }
42
35
 
43
36
  @each $size in $pf-v5-c-avatar--sizes {
package/components/EmptyState/empty-state.css CHANGED
@@ -1,41 +1,49 @@
1
- .pf-v5-c-empty-state {
2
- --pf-v5-c-empty-state--PaddingTop: var(--pf-v5-global--spacer--xl);
3
- --pf-v5-c-empty-state--PaddingRight: var(--pf-v5-global--spacer--xl);
4
- --pf-v5-c-empty-state--PaddingBottom: var(--pf-v5-global--spacer--xl);
5
- --pf-v5-c-empty-state--PaddingLeft: var(--pf-v5-global--spacer--xl);
6
- --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-v5-global--spacer--md);
7
- --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-v5-global--spacer--md);
8
- --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-v5-global--spacer--md);
9
- --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-v5-global--spacer--md);
1
+ :root {
2
+ --pf-v5-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
3
+ --pf-v5-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
4
+ --pf-v5-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);
5
+ --pf-v5-c-empty-state--PaddingLeft: var(--pf-t--global--spacer--xl);
6
+ --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
7
+ --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
8
+ --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
9
+ --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
10
10
  --pf-v5-c-empty-state__content--MaxWidth: none;
11
11
  --pf-v5-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
12
12
  --pf-v5-c-empty-state--m-sm__content--MaxWidth: 25rem;
13
13
  --pf-v5-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14
- --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-v5-global--spacer--lg);
15
- --pf-v5-c-empty-state__icon--FontSize: var(--pf-v5-global--icon--FontSize--xl);
16
- --pf-v5-c-empty-state__icon--Color: var(--pf-v5-global--icon--Color--light);
17
- --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
18
- --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
19
- --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
20
- --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
21
- --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
22
- --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
23
- --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
24
- --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-v5-global--FontSize--md);
25
- --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-v5-global--FontSize--4xl);
26
- --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
27
- --pf-v5-c-empty-state__body--MarginTop: var(--pf-v5-global--spacer--md);
28
- --pf-v5-c-empty-state__body--Color: var(--pf-v5-global--Color--200);
29
- --pf-v5-c-empty-state--body--FontSize: var(--pf-v5-global--FontSize--md);
30
- --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-v5-global--FontSize--sm);
31
- --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-v5-global--spacer--md);
32
- --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-v5-global--FontSize--xl);
33
- --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-v5-global--spacer--lg);
34
- --pf-v5-c-empty-state__footer--RowGap: var(--pf-v5-global--spacer--sm);
35
- --pf-v5-c-empty-state__footer--MarginTop: var(--pf-v5-global--spacer--xl);
36
- --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-v5-global--spacer--md);
37
- --pf-v5-c-empty-state__actions--RowGap: var(--pf-v5-global--spacer--xs);
38
- --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-v5-global--spacer--xs);
14
+ --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-t--global--spacer--lg);
15
+ --pf-v5-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
16
+ --pf-v5-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
17
+ --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
18
+ --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
19
+ --pf-v5-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
20
+ --pf-v5-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
21
+ --pf-v5-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
22
+ --pf-v5-c-empty-state--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
23
+ --pf-v5-c-empty-state--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
24
+ --pf-v5-c-empty-state--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
25
+ --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-t--global--font--family--heading);
26
+ --pf-v5-c-empty-state__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
27
+ --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
28
+ --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
29
+ --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
30
+ --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
31
+ --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
32
+ --pf-v5-c-empty-state__body--MarginTop: var(--pf-t--global--spacer--md);
33
+ --pf-v5-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
34
+ --pf-v5-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
35
+ --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
36
+ --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
37
+ --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
38
+ --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
39
+ --pf-v5-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
40
+ --pf-v5-c-empty-state__footer--MarginTop: var(--pf-t--global--spacer--xl);
41
+ --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
42
+ --pf-v5-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
43
+ --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
44
+ }
45
+
46
+ .pf-v5-c-empty-state {
39
47
  display: flex;
40
48
  align-items: center;
41
49
  justify-content: center;
@@ -74,6 +82,21 @@
74
82
  .pf-v5-c-empty-state.pf-m-full-height {
75
83
  height: 100%;
76
84
  }
85
+ .pf-v5-c-empty-state.pf-m-danger {
86
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-danger__icon--Color);
87
+ }
88
+ .pf-v5-c-empty-state.pf-m-warning {
89
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-warning__icon--Color);
90
+ }
91
+ .pf-v5-c-empty-state.pf-m-success {
92
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-success__icon--Color);
93
+ }
94
+ .pf-v5-c-empty-state.pf-m-info {
95
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-info__icon--Color);
96
+ }
97
+ .pf-v5-c-empty-state.pf-m-custom {
98
+ --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-custom__icon--Color);
99
+ }
77
100
 
78
101
  .pf-v5-c-empty-state__content {
79
102
  max-width: var(--pf-v5-c-empty-state__content--MaxWidth);
package/components/EmptyState/empty-state.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  // @debug $empty-state; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$empty-state} {
4
- --#{$empty-state}--PaddingTop: var(--#{$pf-global}--spacer--xl);
5
- --#{$empty-state}--PaddingRight: var(--#{$pf-global}--spacer--xl);
6
- --#{$empty-state}--PaddingBottom: var(--#{$pf-global}--spacer--xl);
7
- --#{$empty-state}--PaddingLeft: var(--#{$pf-global}--spacer--xl);
8
- --#{$empty-state}--m-xs--PaddingTop: var(--#{$pf-global}--spacer--md);
9
- --#{$empty-state}--m-xs--PaddingRight: var(--#{$pf-global}--spacer--md);
10
- --#{$empty-state}--m-xs--PaddingBottom: var(--#{$pf-global}--spacer--md);
11
- --#{$empty-state}--m-xs--PaddingLeft: var(--#{$pf-global}--spacer--md);
3
+ :root {
4
+ --#{$empty-state}--PaddingTop: var(--pf-t--global--spacer--xl);
5
+ --#{$empty-state}--PaddingRight: var(--pf-t--global--spacer--xl);
6
+ --#{$empty-state}--PaddingBottom: var(--pf-t--global--spacer--xl);
7
+ --#{$empty-state}--PaddingLeft: var(--pf-t--global--spacer--xl);
8
+ --#{$empty-state}--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
9
+ --#{$empty-state}--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
10
+ --#{$empty-state}--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
11
+ --#{$empty-state}--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
12
12
 
13
13
  // Content
14
14
  --#{$empty-state}__content--MaxWidth: none;
@@ -17,40 +17,49 @@
17
17
  --#{$empty-state}--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
18
18
 
19
19
  // Icon
20
- --#{$empty-state}__icon--MarginBottom: var(--#{$pf-global}--spacer--lg);
21
- --#{$empty-state}__icon--FontSize: var(--#{$pf-global}--icon--FontSize--xl);
22
- --#{$empty-state}__icon--Color: var(--#{$pf-global}--icon--Color--light);
23
- --#{$empty-state}--m-xs__icon--MarginBottom: var(--#{$pf-global}--spacer--md);
24
- --#{$empty-state}--m-xl__icon--MarginBottom: var(--#{$pf-global}--spacer--xl);
25
- --#{$empty-state}--m-xl__icon--FontSize: #{pf-size-prem(100px)};
20
+ --#{$empty-state}__icon--MarginBottom: var(--pf-t--global--spacer--lg);
21
+ --#{$empty-state}__icon--FontSize: var(--pf-t--global--icon--size--2xl);
22
+ --#{$empty-state}__icon--Color: var(--pf-t--global--icon--color--subtle);
23
+ --#{$empty-state}--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
24
+ --#{$empty-state}--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
25
+ --#{$empty-state}--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
26
+
27
+ // Status variant icon color
28
+ --#{$empty-state}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
29
+ --#{$empty-state}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
30
+ --#{$empty-state}--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
31
+ --#{$empty-state}--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
32
+ --#{$empty-state}--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
26
33
 
27
34
  // Title text
28
- --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
29
- --#{$empty-state}__title-text--FontSize: var(--#{$pf-global}--FontSize--xl);
30
- --#{$empty-state}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
31
- --#{$empty-state}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
32
- --#{$empty-state}--m-xs__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
33
- --#{$empty-state}--m-xl__title-text--FontSize: var(--#{$pf-global}--FontSize--4xl);
34
- --#{$empty-state}--m-xl__title-text--LineHeight: var(--#{$pf-global}--LineHeight--sm);
35
+ --#{$empty-state}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
36
+ --#{$empty-state}__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
37
+ --#{$empty-state}__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
38
+ --#{$empty-state}__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
39
+ --#{$empty-state}--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
40
+ --#{$empty-state}--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
41
+ --#{$empty-state}--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
35
42
 
36
43
  // Body
37
- --#{$empty-state}__body--MarginTop: var(--#{$pf-global}--spacer--md);
38
- --#{$empty-state}__body--Color: var(--#{$pf-global}--Color--200);
39
- --#{$empty-state}--body--FontSize: var(--#{$pf-global}--FontSize--md);
40
- --#{$empty-state}--m-xs__body--FontSize: var(--#{$pf-global}--FontSize--sm);
41
- --#{$empty-state}--m-xs__body--MarginTop: var(--#{$pf-global}--spacer--md);
42
- --#{$empty-state}--m-xl__body--FontSize: var(--#{$pf-global}--FontSize--xl);
43
- --#{$empty-state}--m-xl__body--MarginTop: var(--#{$pf-global}--spacer--lg);
44
+ --#{$empty-state}__body--MarginTop: var(--pf-t--global--spacer--md);
45
+ --#{$empty-state}__body--Color: var(--pf-t--global--text--color--subtle);
46
+ --#{$empty-state}--body--FontSize: var(--pf-t--global--font--size--body--lg);
47
+ --#{$empty-state}--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
48
+ --#{$empty-state}--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
49
+ --#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
50
+ --#{$empty-state}--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
44
51
 
45
52
  // Footer
46
- --#{$empty-state}__footer--RowGap: var(--#{$pf-global}--spacer--sm);
47
- --#{$empty-state}__footer--MarginTop: var(--#{$pf-global}--spacer--xl);
48
- --#{$empty-state}--m-xs__footer--MarginTop: var(--#{$pf-global}--spacer--md);
53
+ --#{$empty-state}__footer--RowGap: var(--pf-t--global--spacer--sm);
54
+ --#{$empty-state}__footer--MarginTop: var(--pf-t--global--spacer--xl);
55
+ --#{$empty-state}--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
49
56
 
50
57
  // Actions
51
- --#{$empty-state}__actions--RowGap: var(--#{$pf-global}--spacer--xs);
52
- --#{$empty-state}__actions--ColumnGap: var(--#{$pf-global}--spacer--xs);
58
+ --#{$empty-state}__actions--RowGap: var(--pf-t--global--spacer--sm);
59
+ --#{$empty-state}__actions--ColumnGap: var(--pf-t--global--spacer--md);
60
+ }
53
61
 
62
+ .#{$empty-state} {
54
63
  display: flex;
55
64
  align-items: center;
56
65
  justify-content: center;
@@ -93,6 +102,26 @@
93
102
  &.pf-m-full-height {
94
103
  height: 100%;
95
104
  }
105
+
106
+ &.pf-m-danger {
107
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-danger__icon--Color);
108
+ }
109
+
110
+ &.pf-m-warning {
111
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-warning__icon--Color);
112
+ }
113
+
114
+ &.pf-m-success {
115
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-success__icon--Color);
116
+ }
117
+
118
+ &.pf-m-info {
119
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-info__icon--Color);
120
+ }
121
+
122
+ &.pf-m-custom {
123
+ --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-custom__icon--Color);
124
+ }
96
125
  }
97
126
 
98
127
  .#{$empty-state}__content {
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -3,11 +3,6 @@
3
3
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
4
4
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
5
5
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
6
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
7
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
8
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
9
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
10
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
11
6
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
12
7
  --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
13
8
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
@@ -17,6 +12,9 @@
17
12
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
18
13
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
19
14
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
16
+ --pf-v5-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
17
+ --pf-v5-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
20
18
  --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
21
19
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
22
20
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -51,7 +49,7 @@
51
49
  }
52
50
 
53
51
  .pf-v5-c-expandable-section.pf-m-expanded {
54
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
52
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section--m-expanded__toggle-text--Color);
55
53
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
56
54
  --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);
57
55
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
@@ -106,23 +104,14 @@
106
104
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
107
105
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
108
106
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
109
- color: var(--pf-v5-c-expandable-section__toggle--Color);
110
107
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
111
108
  border: none;
112
109
  border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
113
110
  }
114
- .pf-v5-c-expandable-section__toggle:hover {
115
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
111
+ .pf-v5-c-expandable-section__toggle:is(:hover, :focus) {
112
+ --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section__toggle-text--hover--Color);
116
113
  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
117
114
  }
118
- .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
119
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
120
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
121
- }
122
- .pf-v5-c-expandable-section__toggle:focus {
123
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
124
- --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
125
- }
126
115
 
127
116
  .pf-v5-c-expandable-section__toggle-icon {
128
117
  min-width: var(--pf-v5-c-expandable-section__toggle-icon--MinWidth);
@@ -138,6 +127,10 @@
138
127
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
139
128
  }
140
129
 
130
+ .pf-v5-c-expandable-section__toggle-text {
131
+ color: var(--pf-v5-c-expandable-section__toggle-text--Color);
132
+ }
133
+
141
134
  .pf-v5-c-expandable-section__content {
142
135
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
143
136
  padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -6,11 +6,6 @@
6
6
  --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
7
7
  --#{$expandable-section}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
8
8
  --#{$expandable-section}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
9
- --#{$expandable-section}__toggle--Color: var(--pf-t--global--color--brand--default);
10
- --#{$expandable-section}__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
11
- --#{$expandable-section}__toggle--active--Color: var(--pf-t--global--color--brand--hover);
12
- --#{$expandable-section}__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
13
- --#{$expandable-section}__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
14
9
  --#{$expandable-section}__toggle--BackgroundColor: transparent;
15
10
  --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
16
11
 
@@ -23,6 +18,12 @@
23
18
  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
24
19
  --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
25
20
 
21
+ // Toggle text
22
+ --#{$expandable-section}__toggle-text--Color: var(--pf-t--global--color--brand--default);
23
+ --#{$expandable-section}__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
24
+ --#{$expandable-section}--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
25
+
26
+
26
27
  // Content
27
28
  --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
28
29
  --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
@@ -68,7 +69,7 @@
68
69
 
69
70
  .#{$expandable-section} {
70
71
  &.pf-m-expanded {
71
- --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--m-expanded--Color);
72
+ --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}--m-expanded__toggle-text--Color);
72
73
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
73
74
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
74
75
  --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
@@ -132,26 +133,14 @@
132
133
  padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
133
134
  padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
134
135
  padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
135
- color: var(--#{$expandable-section}__toggle--Color);
136
136
  background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
137
137
  border: none;
138
138
  border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
139
139
 
140
- &:hover {
141
- --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--hover--Color);
140
+ &:is(:hover, :focus) {
141
+ --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}__toggle-text--hover--Color);
142
142
  --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
143
143
  }
144
-
145
- &:active,
146
- &.pf-m-active {
147
- --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--active--Color);
148
- --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--active--BackgroundColor, initial);
149
- }
150
-
151
- &:focus {
152
- --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--focus--Color);
153
- --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--focus--BackgroundColor, initial);
154
- }
155
144
  }
156
145
 
157
146
  .#{$expandable-section}__toggle-icon {
@@ -167,6 +156,10 @@
167
156
  }
168
157
  }
169
158
 
159
+ .#{$expandable-section}__toggle-text {
160
+ color: var(--#{$expandable-section}__toggle-text--Color);
161
+ }
162
+
170
163
  .#{$expandable-section}__content {
171
164
  max-width: var(--#{$expandable-section}__content--MaxWidth);
172
165
  padding-block-start: var(--#{$expandable-section}__content--PaddingTop);
package/docs/components/Avatar/examples/Avatar.md CHANGED
@@ -2,9 +2,7 @@
2
2
  id: Avatar
3
3
  section: components
4
4
  cssPrefix: pf-v5-c-avatar
5
- ---import './Avatar.css'
6
-
7
- ## Examples
5
+ ---## Examples
8
6
 
9
7
  ### Basic
10
8
 
@@ -17,28 +15,17 @@ cssPrefix: pf-v5-c-avatar
17
15
 
18
16
  ```
19
17
 
20
- ### Bordered - light
18
+ ### Bordered
21
19
 
22
20
  ```html
23
21
  <img
24
- class="pf-v5-c-avatar pf-m-light"
25
- alt="Avatar image light"
22
+ class="pf-v5-c-avatar pf-m-bordered"
23
+ alt="Avatar image bordered"
26
24
  src="/assets/images/img_avatar-light.svg"
27
25
  />
28
26
 
29
27
  ```
30
28
 
31
- ### Bordered - dark
32
-
33
- ```html
34
- <img
35
- class="pf-v5-c-avatar pf-m-dark"
36
- alt="Avatar image dark"
37
- src="/assets/images/img_avatar-dark.svg"
38
- />
39
-
40
- ```
41
-
42
29
  ### Small
43
30
 
44
31
  ```html
@@ -100,8 +87,7 @@ The avatar component provides a default SVG icon. If an image is used it should
100
87
  | Class | Applied to | Outcome |
101
88
  | -- | -- | -- |
102
89
  | `.pf-v5-c-avatar` | `<img>` | Initiates an avatar image. **Required** |
103
- | `.pf-m-light` | `.pf-v5-c-avatar` | Modifies an avatar for use against a light background. |
104
- | `.pf-m-dark` | `.pf-v5-c-avatar` | Modifies an avatar for use against a dark background. |
90
+ | `.pf-m-bordered` | `.pf-v5-c-avatar` | Modifies an avatar to have a border. |
105
91
  | `.pf-m-sm{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
106
92
  | `.pf-m-md{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
107
93
  | `.pf-m-lg{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -75,7 +75,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
75
75
  kind: HelmChartRepository
76
76
  metadata:
77
77
  name: azure-sample-repo<div
78
- class="pf-v5-c-expandable-section pf-m-detached"
78
+ class="pf-v5-c-expandable-section"
79
79
  ><div
80
80
  class="pf-v5-c-expandable-section__content"
81
81
  hidden
@@ -87,7 +87,7 @@ name: azure-sample-repo<div
87
87
  </div>
88
88
  </code>
89
89
  </pre>
90
- <div class="pf-v5-c-expandable-section pf-m-detached">
90
+ <div class="pf-v5-c-expandable-section">
91
91
  <button
92
92
  type="button"
93
93
  class="pf-v5-c-expandable-section__toggle"
@@ -136,7 +136,7 @@ name: azure-sample-repo<div
136
136
  kind: HelmChartRepository
137
137
  metadata:
138
138
  name: azure-sample-repo<div
139
- class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
139
+ class="pf-v5-c-expandable-section pf-m-expanded"
140
140
  ><div
141
141
  class="pf-v5-c-expandable-section__content"
142
142
  id="code-block-expandable-expanded-content"
@@ -147,7 +147,7 @@ name: azure-sample-repo<div
147
147
  </div>
148
148
  </code>
149
149
  </pre>
150
- <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
150
+ <div class="pf-v5-c-expandable-section pf-m-expanded">
151
151
  <button
152
152
  type="button"
153
153
  class="pf-v5-c-expandable-section__toggle"