@patternfly/patternfly 6.0.0-alpha.26 → 6.0.0-alpha.28

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 (15) hide show
  1. package/components/Accordion/accordion.css +81 -182
  2. package/components/Accordion/accordion.scss +89 -200
  3. package/components/Banner/banner.css +86 -64
  4. package/components/Banner/banner.scss +90 -32
  5. package/docs/components/Accordion/examples/Accordion.md +596 -493
  6. package/docs/components/Banner/examples/Banner.md +48 -25
  7. package/docs/demos/Card/examples/Card.md +2 -2
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +206 -250
  10. package/patternfly-theme-dark-unversioned.css +206 -250
  11. package/patternfly.css +206 -250
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/components/Accordion/themes/dark/accordion.scss +0 -9
  15. package/components/Banner/themes/dark/banner.scss +0 -14
package/components/Accordion/accordion.css CHANGED
@@ -1,154 +1,99 @@
1
- .pf-v5-c-accordion {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-accordion {
14
- --pf-v5-c-accordion--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15
- --pf-v5-c-accordion__toggle--PaddingTop: var(--pf-v5-global--spacer--sm);
16
- --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
17
- --pf-v5-c-accordion__toggle--PaddingBottom: var(--pf-v5-global--spacer--sm);
18
- --pf-v5-c-accordion__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
19
- --pf-v5-c-accordion__toggle--before--Top: 0;
20
- --pf-v5-c-accordion__toggle--after--Top: 0;
21
- --pf-v5-c-accordion__toggle--after--BackgroundColor: transparent;
22
- --pf-v5-c-accordion__toggle--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
23
- --pf-v5-c-accordion__toggle--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
24
- --pf-v5-c-accordion__toggle--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
25
- --pf-v5-c-accordion__toggle--before--Width: var(--pf-v5-global--BorderWidth--lg);
26
- --pf-v5-c-accordion__toggle--after--Width: var(--pf-v5-global--BorderWidth--lg);
27
- --pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
28
- --pf-v5-c-accordion__toggle--BackgroundColor: transparent;
29
- --pf-v5-c-accordion__toggle--JustifyContent: space-between;
30
- --pf-v5-c-accordion__toggle--ColumnGap: 0;
31
- --pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent: start;
32
- --pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-v5-global--spacer--md);
33
- --pf-v5-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-v5-global--spacer--lg));
34
- --pf-v5-c-accordion__toggle--hover__toggle-text--Color: var(--pf-v5-global--link--Color);
35
- --pf-v5-c-accordion__toggle--active__toggle-text--Color: var(--pf-v5-global--link--Color);
36
- --pf-v5-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
37
- --pf-v5-c-accordion__toggle--focus__toggle-text--Color: var(--pf-v5-global--link--Color);
38
- --pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
39
- --pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-v5-global--link--Color);
40
- --pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
1
+ :root {
2
+ --pf-v5-c-accordion--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3
+ --pf-v5-c-accordion--RowGap: var(--pf-t--global--spacer--xs);
4
+ --pf-v5-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
5
+ --pf-v5-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
6
+ --pf-v5-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-accordion__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
8
+ --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-t--global--spacer--md);
9
+ --pf-v5-c-accordion__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
10
+ --pf-v5-c-accordion__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
11
+ --pf-v5-c-accordion__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
12
+ --pf-v5-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
13
+ --pf-v5-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
14
+ --pf-v5-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
15
+ --pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--md);
16
+ --pf-v5-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
17
+ --pf-v5-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body);
18
+ --pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
41
19
  --pf-v5-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
42
20
  --pf-v5-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
43
- --pf-v5-c-accordion__expandable-content--Color: var(--pf-v5-global--Color--200);
44
- --pf-v5-c-accordion__expandable-content--FontSize: var(--pf-v5-global--FontSize--sm);
45
- --pf-v5-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
21
+ --pf-v5-c-accordion__expandable-content--MarginRight: var(--pf-t--global--spacer--md);
22
+ --pf-v5-c-accordion__expandable-content--MarginBottom: var(--pf-t--global--spacer--md);
23
+ --pf-v5-c-accordion__expandable-content--MarginLeft: var(--pf-t--global--spacer--md);
24
+ --pf-v5-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
25
+ --pf-v5-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
26
+ --pf-v5-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
27
+ --pf-v5-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--md);
46
28
  --pf-v5-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
47
- --pf-v5-c-accordion__expandable-content-body--PaddingTop: var(--pf-v5-global--spacer--sm);
48
- --pf-v5-c-accordion__expandable-content-body--PaddingRight: var(--pf-v5-global--spacer--md);
49
- --pf-v5-c-accordion__expandable-content-body--PaddingBottom: var(--pf-v5-global--spacer--sm);
50
- --pf-v5-c-accordion__expandable-content-body--PaddingLeft: var(--pf-v5-global--spacer--md);
29
+ --pf-v5-c-accordion__expandable-content-body--PaddingTop: var(--pf-t--global--spacer--sm);
30
+ --pf-v5-c-accordion__expandable-content-body--PaddingRight: var(--pf-t--global--spacer--sm);
31
+ --pf-v5-c-accordion__expandable-content-body--PaddingBottom: var(--pf-t--global--spacer--sm);
32
+ --pf-v5-c-accordion__expandable-content-body--PaddingLeft: var(--pf-t--global--spacer--sm);
51
33
  --pf-v5-c-accordion__expandable-content-body--expandable-content-body--PaddingTop: 0;
52
- --pf-v5-c-accordion__expandable-content-body--after--BackgroundColor: transparent;
53
- --pf-v5-c-accordion__expandable-content-body--after--Width: var(--pf-v5-global--BorderWidth--lg);
54
- --pf-v5-c-accordion__expandable-content-body--before--Top: 0;
55
- --pf-v5-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
56
- --pf-v5-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
57
- --pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
58
- --pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg);
59
- --pf-v5-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-v5-global--FontFamily--heading);
60
- --pf-v5-c-accordion--m-display-lg__toggle--FontSize: var(--pf-v5-global--FontSize--xl);
61
- --pf-v5-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-v5-global--Color--100);
62
- --pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-v5-global--Color--100);
63
- --pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
64
- --pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-v5-global--Color--100);
65
- --pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
66
- --pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-v5-global--Color--100);
67
- --pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
68
- --pf-v5-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-v5-global--FontSize--md);
69
- --pf-v5-c-accordion--m-display-lg__expandable-content--Color: var(--pf-v5-global--Color--100);
70
- --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingTop: 0;
71
- --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingRight: var(--pf-v5-global--spacer--md);
72
- --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingBottom: var(--pf-v5-global--spacer--md);
73
- --pf-v5-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
74
- --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingLeft: var(--pf-v5-global--spacer--lg);
75
- --pf-v5-c-accordion--m-bordered--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
76
- --pf-v5-c-accordion--m-bordered--BorderTopColor: var(--pf-v5-global--BorderColor--100);
77
- --pf-v5-c-accordion--m-bordered__toggle--after--Top: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
78
- --pf-v5-c-accordion--m-bordered__toggle--before--BorderColor: var(--pf-v5-global--BorderColor--100);
79
- --pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth: 0;
80
- --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
81
- --pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
82
- --pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
83
- color: var(--pf-v5-global--Color--100);
34
+ --pf-v5-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
35
+ --pf-v5-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--md);
36
+ --pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
37
+ --pf-v5-c-accordion--m-display-lg__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
38
+ --pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
39
+ --pf-v5-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-t--global--font--family--heading);
40
+ --pf-v5-c-accordion--m-display-lg__toggle--FontSize: var(--pf-t--global--font--size--heading--sm);
41
+ --pf-v5-c-accordion--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading);
42
+ --pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--bold);
43
+ --pf-v5-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-t--global--font--size--body--lg);
44
+ --pf-v5-c-accordion--m-display-lg__expandable-content--Color: var(--pf-t--global--text--color--regular);
45
+ --pf-v5-c-accordion--m-bordered--RowGap: 0;
46
+ --pf-v5-c-accordion__item--m-bordered--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
47
+ --pf-v5-c-accordion__item--m-bordered--BorderBottomColor: var(--pf-t--global--border--color--default);
48
+ }
49
+
50
+ .pf-v5-c-accordion {
51
+ display: flex;
52
+ flex-direction: column;
53
+ row-gap: var(--pf-v5-c-accordion--RowGap);
84
54
  background-color: var(--pf-v5-c-accordion--BackgroundColor);
85
55
  }
86
56
  .pf-v5-c-accordion.pf-m-toggle-start {
87
- --pf-v5-c-accordion__toggle--JustifyContent: var(--pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent);
88
57
  --pf-v5-c-accordion__toggle--ColumnGap: var(--pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap);
89
58
  }
90
59
  .pf-v5-c-accordion.pf-m-display-lg {
91
60
  --pf-v5-c-accordion__toggle--PaddingTop: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingTop);
92
61
  --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingRight);
93
62
  --pf-v5-c-accordion__toggle--PaddingBottom: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom);
63
+ --pf-v5-c-accordion__toggle--m-expanded--PaddingBottom: var(--pf-v5-c-accordion--m-display-lg__toggle--m-expanded--PaddingBottom);
94
64
  --pf-v5-c-accordion__toggle--PaddingLeft: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft);
95
65
  --pf-v5-c-accordion__toggle--FontFamily: var(--pf-v5-c-accordion--m-display-lg__toggle--FontFamily);
96
66
  --pf-v5-c-accordion__toggle--FontSize: var(--pf-v5-c-accordion--m-display-lg__toggle--FontSize);
97
- --pf-v5-c-accordion__toggle--hover__toggle-text--Color: var(--pf-v5-c-accordion--m-display-lg__toggle--hover__toggle-text--Color);
98
- --pf-v5-c-accordion__toggle--active__toggle-text--Color: var(--pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--Color);
99
- --pf-v5-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight);
100
- --pf-v5-c-accordion__toggle--focus__toggle-text--Color: var(--pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--Color);
101
- --pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
102
- --pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
67
+ --pf-v5-c-accordion__toggle-text--FontWeight: var(--pf-v5-c-accordion--m-display-lg__toggle-text--FontWeight);
103
68
  --pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
104
- --pf-v5-c-accordion__expandable-content-body--PaddingTop: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingTop);
105
- --pf-v5-c-accordion__expandable-content-body--PaddingRight: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingRight);
106
- --pf-v5-c-accordion__expandable-content-body--PaddingBottom: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingBottom);
107
- --pf-v5-c-accordion__expandable-content-body--PaddingLeft: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingLeft);
108
69
  --pf-v5-c-accordion__expandable-content--FontSize: var(--pf-v5-c-accordion--m-display-lg__expandable-content--FontSize);
109
70
  --pf-v5-c-accordion__expandable-content--Color: var(--pf-v5-c-accordion--m-display-lg__expandable-content--Color);
110
71
  }
111
- .pf-v5-c-accordion.pf-m-display-lg .pf-v5-c-accordion__expandable-content-body:last-child {
112
- --pf-v5-c-accordion__expandable-content-body--PaddingBottom: var(--pf-v5-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom);
113
- }
114
72
  .pf-v5-c-accordion.pf-m-bordered {
115
- --pf-v5-c-accordion__toggle--after--Top: var(--pf-v5-c-accordion--m-bordered__toggle--after--Top);
116
- border-block-start: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
117
- }
118
- .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle::before {
119
- position: absolute;
120
- inset-block-start: 0;
121
- inset-block-end: 0;
122
- inset-inline-start: 0;
123
- inset-inline-end: 0;
124
- content: "";
125
- border-color: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
126
- border-style: solid;
127
- border-block-start-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth);
128
- border-block-end-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
129
- border-inline-start-width: 0;
130
- border-inline-end-width: 0;
131
- }
132
- .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle.pf-m-expanded {
133
- --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
134
- }
135
- .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__expandable-content.pf-m-expanded .pf-v5-c-accordion__expandable-content-body:last-child::before {
136
- position: absolute;
137
- inset-block-start: 0;
138
- inset-block-end: 0;
139
- inset-inline-start: 0;
140
- inset-inline-end: 0;
141
- pointer-events: none;
142
- content: "";
143
- border-block-end: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
73
+ --pf-v5-c-accordion--RowGap: var(--pf-v5-c-accordion--m-bordered--RowGap);
74
+ --pf-v5-c-accordion__item--BorderRadius: 0;
75
+ --pf-v5-c-accordion__toggle--BorderRadius: 0;
76
+ }
77
+ .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__item {
78
+ border-block-end: var(--pf-v5-c-accordion__item--m-bordered--BorderBottomWidth) solid var(--pf-v5-c-accordion__item--m-bordered--BorderBottomColor);
79
+ }
80
+
81
+ .pf-v5-c-accordion__item {
82
+ border-radius: var(--pf-v5-c-accordion__item--BorderRadius);
83
+ }
84
+ .pf-v5-c-accordion__item.pf-m-expanded {
85
+ --pf-v5-c-accordion__toggle--PaddingBottom: var(--pf-v5-c-accordion__toggle--m-expanded--PaddingBottom);
86
+ --pf-v5-c-accordion__toggle-text--FontWeight: var(--pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
87
+ background-color: var(--pf-v5-c-accordion__item--m-expanded--BackgroundColor);
88
+ }
89
+ .pf-v5-c-accordion__item.pf-m-expanded .pf-v5-c-accordion__toggle-icon {
90
+ transform: rotate(var(--pf-v5-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
144
91
  }
145
92
 
146
93
  .pf-v5-c-accordion__toggle {
147
- position: relative;
148
94
  display: flex;
149
95
  column-gap: var(--pf-v5-c-accordion__toggle--ColumnGap);
150
96
  align-items: center;
151
- justify-content: var(--pf-v5-c-accordion__toggle--JustifyContent);
152
97
  width: 100%;
153
98
  padding-block-start: var(--pf-v5-c-accordion__toggle--PaddingTop);
154
99
  padding-block-end: var(--pf-v5-c-accordion__toggle--PaddingBottom);
@@ -156,54 +101,22 @@
156
101
  padding-inline-end: var(--pf-v5-c-accordion__toggle--PaddingRight);
157
102
  font-family: var(--pf-v5-c-accordion__toggle--FontFamily, inherit);
158
103
  font-size: var(--pf-v5-c-accordion__toggle--FontSize, inherit);
104
+ text-align: start;
159
105
  background-color: var(--pf-v5-c-accordion__toggle--BackgroundColor);
160
106
  border: 0;
107
+ border-radius: var(--pf-v5-c-accordion__toggle--BorderRadius);
161
108
  }
162
- .pf-v5-c-accordion__toggle::after {
163
- position: absolute;
164
- inset-block-start: var(--pf-v5-c-accordion__toggle--after--Top);
165
- inset-block-end: 0;
166
- inset-inline-start: 0;
167
- width: var(--pf-v5-c-accordion__toggle--after--Width);
168
- content: "";
169
- background-color: var(--pf-v5-c-accordion__toggle--after--BackgroundColor);
170
- }
171
- .pf-v5-c-accordion__toggle.pf-m-expanded {
172
- --pf-v5-c-accordion__toggle--after--BackgroundColor: var(--pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor);
173
- }
174
- .pf-v5-c-accordion__toggle.pf-m-expanded .pf-v5-c-accordion__toggle-text {
175
- font-weight: var(--pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
176
- color: var(--pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color);
177
- }
178
- .pf-v5-c-accordion__toggle.pf-m-expanded .pf-v5-c-accordion__toggle-icon {
179
- transform: rotate(var(--pf-v5-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
180
- }
181
- .pf-v5-c-accordion__toggle:hover {
182
- background-color: var(--pf-v5-c-accordion__toggle--hover--BackgroundColor);
183
- }
184
- .pf-v5-c-accordion__toggle:hover .pf-v5-c-accordion__toggle-text {
185
- color: var(--pf-v5-c-accordion__toggle--hover__toggle-text--Color);
186
- }
187
- .pf-v5-c-accordion__toggle:focus {
188
- background-color: var(--pf-v5-c-accordion__toggle--focus--BackgroundColor);
189
- }
190
- .pf-v5-c-accordion__toggle:focus .pf-v5-c-accordion__toggle-text {
191
- font-weight: var(--pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight);
192
- color: var(--pf-v5-c-accordion__toggle--focus__toggle-text--Color);
193
- }
194
- .pf-v5-c-accordion__toggle:active {
195
- background-color: var(--pf-v5-c-accordion__toggle--active--BackgroundColor);
196
- }
197
- .pf-v5-c-accordion__toggle:active .pf-v5-c-accordion__toggle-text {
198
- font-weight: var(--pf-v5-c-accordion__toggle--active__toggle-text--FontWeight);
199
- color: var(--pf-v5-c-accordion__toggle--active__toggle-text--Color);
109
+ .pf-v5-c-accordion__toggle:is(:hover, :focus) {
110
+ --pf-v5-c-accordion__toggle--BackgroundColor: var(--pf-v5-c-accordion__toggle--hover--BackgroundColor);
200
111
  }
201
112
 
202
113
  .pf-v5-c-accordion__toggle-text {
203
114
  overflow: hidden;
204
115
  text-overflow: ellipsis;
205
116
  white-space: nowrap;
206
- max-width: var(--pf-v5-c-accordion__toggle-text--MaxWidth);
117
+ flex-grow: 1;
118
+ font-weight: var(--pf-v5-c-accordion__toggle-text--FontWeight);
119
+ color: var(--pf-v5-c-accordion__toggle-text--Color);
207
120
  }
208
121
 
209
122
  .pf-v5-c-accordion__toggle-icon {
@@ -214,39 +127,25 @@
214
127
  }
215
128
 
216
129
  .pf-v5-c-accordion__expandable-content {
130
+ margin-block-end: var(--pf-v5-c-accordion__expandable-content--MarginBottom);
131
+ margin-inline-start: var(--pf-v5-c-accordion__expandable-content--MarginLeft);
132
+ margin-inline-end: var(--pf-v5-c-accordion__expandable-content--MarginRight);
217
133
  font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
218
134
  color: var(--pf-v5-c-accordion__expandable-content--Color);
135
+ background-color: var(--pf-v5-c-accordion__expandable-content--BackgroundColor);
136
+ border-radius: var(--pf-v5-c-accordion__expandable-content--BorderRadius);
219
137
  }
220
138
  .pf-v5-c-accordion__expandable-content.pf-m-fixed {
221
139
  max-height: var(--pf-v5-c-accordion__expandable-content--m-fixed--MaxHeight);
222
140
  overflow-y: auto;
223
141
  }
224
- .pf-v5-c-accordion__expandable-content.pf-m-expanded {
225
- --pf-v5-c-accordion__expandable-content-body--after--BackgroundColor: var(--pf-v5-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor);
226
- }
227
142
 
228
143
  .pf-v5-c-accordion__expandable-content-body {
229
- position: relative;
230
144
  padding-block-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop);
231
145
  padding-block-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom);
232
146
  padding-inline-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
233
147
  padding-inline-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingRight);
234
148
  }
235
- .pf-v5-c-accordion__expandable-content-body::after {
236
- position: absolute;
237
- inset-block-start: 0;
238
- inset-block-end: 0;
239
- inset-inline-start: 0;
240
- width: var(--pf-v5-c-accordion__expandable-content-body--after--Width);
241
- content: "";
242
- background-color: var(--pf-v5-c-accordion__expandable-content-body--after--BackgroundColor);
243
- }
244
149
  .pf-v5-c-accordion__expandable-content-body + .pf-v5-c-accordion__expandable-content-body {
245
150
  --pf-v5-c-accordion__expandable-content-body--PaddingTop: var(--pf-v5-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
246
- }
247
-
248
- :where(.pf-v5-theme-dark) .pf-v5-c-accordion {
249
- --pf-v5-c-accordion__toggle--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
250
- --pf-v5-c-accordion__toggle--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
251
- --pf-v5-c-accordion__toggle--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
252
151
  }