@patternfly/patternfly 6.0.0-alpha.83 → 6.0.0-alpha.85

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 (42) hide show
  1. package/components/Accordion/accordion.css +1 -1
  2. package/components/Accordion/accordion.scss +1 -1
  3. package/components/Breadcrumb/breadcrumb.css +9 -1
  4. package/components/Breadcrumb/breadcrumb.scss +10 -3
  5. package/components/Button/button.css +22 -22
  6. package/components/Button/button.scss +22 -22
  7. package/components/DataList/data-list.css +1 -1
  8. package/components/DataList/data-list.scss +1 -1
  9. package/components/Form/form.css +3 -7
  10. package/components/Form/form.scss +3 -7
  11. package/components/FormControl/form-control.css +3 -3
  12. package/components/FormControl/form-control.scss +3 -3
  13. package/components/Login/login.css +2 -24
  14. package/components/Login/login.scss +2 -29
  15. package/components/Menu/menu.css +388 -419
  16. package/components/Menu/menu.scss +369 -529
  17. package/components/NotificationBadge/notification-badge.css +4 -4
  18. package/components/NotificationBadge/notification-badge.scss +4 -4
  19. package/components/Pagination/pagination.css +1 -1
  20. package/components/Pagination/pagination.scss +1 -1
  21. package/components/Table/table-grid.css +3 -3
  22. package/components/Table/table-grid.scss +3 -3
  23. package/components/Table/table-tree-view.css +5 -5
  24. package/components/Table/table-tree-view.scss +1 -1
  25. package/components/Table/table.css +8 -8
  26. package/components/Table/table.scss +8 -8
  27. package/components/Tabs/tabs.css +1 -1
  28. package/components/Tabs/tabs.scss +1 -1
  29. package/docs/components/LogViewer/examples/LogViewer.md +110 -110
  30. package/docs/components/Login/examples/Login.md +150 -100
  31. package/docs/components/Menu/examples/Menu.css +7 -11
  32. package/docs/components/Menu/examples/Menu.md +637 -944
  33. package/docs/components/Nav/examples/Navigation.md +113 -140
  34. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  35. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +10 -10
  36. package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
  37. package/package.json +1 -1
  38. package/patternfly-no-globals.css +570 -503
  39. package/patternfly-theme-dark-unversioned.css +570 -503
  40. package/patternfly.css +570 -503
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
package/components/Accordion/accordion.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --pf-v5-c-accordion--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3
3
  --pf-v5-c-accordion--RowGap: var(--pf-t--global--spacer--xs);
4
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);
5
+ --pf-v5-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
6
6
  --pf-v5-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
7
7
  --pf-v5-c-accordion__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
8
8
  --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-t--global--spacer--md);
package/components/Accordion/accordion.scss CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  // accordion item
9
9
  --#{$accordion}__item--BorderRadius: var(--pf-t--global--border--radius--200);
10
- --#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
10
+ --#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11
11
 
12
12
  // accordion toggle
13
13
  --#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
package/components/Breadcrumb/breadcrumb.css CHANGED
@@ -1,10 +1,13 @@
1
- :root, .pf-v5-c-breadcrumb {
1
+ :where(:root),
2
+ :where(.pf-v5-c-breadcrumb) {
2
3
  --pf-v5-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3
4
  --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
4
5
  --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-t--global--spacer--sm);
5
6
  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
6
7
  --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
7
8
  --pf-v5-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
9
+ --pf-v5-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10
+ --pf-v5-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
8
11
  --pf-v5-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
9
12
  --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
10
13
  --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
@@ -38,6 +41,9 @@
38
41
  white-space: nowrap;
39
42
  list-style: none;
40
43
  }
44
+ .pf-v5-c-breadcrumb__item:first-child:has(.pf-v5-c-breadcrumb__link) {
45
+ --pf-v5-c-breadcrumb__link--PaddingInlineStart: 0;
46
+ }
41
47
  .pf-v5-c-breadcrumb__item:not(:last-child) {
42
48
  margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
43
49
  }
@@ -53,6 +59,8 @@
53
59
  }
54
60
 
55
61
  .pf-v5-c-breadcrumb__link {
62
+ padding-inline-start: var(--pf-v5-c-breadcrumb__link--PaddingInlineStart);
63
+ padding-inline-end: var(--pf-v5-c-breadcrumb__link--PaddingInlineEnd);
56
64
  font-size: inherit;
57
65
  font-weight: var(--pf-v5-c-breadcrumb__link--FontWeight);
58
66
  line-height: inherit;
package/components/Breadcrumb/breadcrumb.scss CHANGED
@@ -1,6 +1,5 @@
1
- // @debug $breadcrumb; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
-
3
- :root, .#{$breadcrumb} {
1
+ :where(:root),
2
+ :where(.#{$breadcrumb}) {
4
3
  // Breadcrumb item
5
4
  --#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--sm);
6
5
  --#{$breadcrumb}__item--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -12,6 +11,8 @@
12
11
  --#{$breadcrumb}__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
13
12
 
14
13
  // Breadcrumb link
14
+ --#{$breadcrumb}__link--PaddingInlineStart: var(--pf-t--global--spacer--sm); // use a mutable value for alignment control
15
+ --#{$breadcrumb}__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm); // use a mutable value for alignment control
15
16
  --#{$breadcrumb}__link--Color: var(--pf-t--global--text--color--link--default);
16
17
  --#{$breadcrumb}__link--TextDecoration: var(--pf-t--global--link--text-decoration);
17
18
  --#{$breadcrumb}__link--hover--Color: var(--pf-t--global--text--color--link--hover);
@@ -53,6 +54,10 @@
53
54
  white-space: nowrap; // Keeps the item-divider and __link text on the same line
54
55
  list-style: none;
55
56
 
57
+ &:first-child:has(.#{$breadcrumb}__link) {
58
+ --#{$breadcrumb}__link--PaddingInlineStart: 0; // remove padding from first child if link
59
+ }
60
+
56
61
  &:not(:last-child) {
57
62
  margin-inline-end: var(--#{$breadcrumb}__item--MarginRight);
58
63
  }
@@ -70,6 +75,8 @@
70
75
 
71
76
  // Breadcrumb link
72
77
  .#{$breadcrumb}__link {
78
+ padding-inline-start: var(--#{$breadcrumb}__link--PaddingInlineStart); // use a mutable value for alignment control
79
+ padding-inline-end: var(--#{$breadcrumb}__link--PaddingInlineEnd); // use a mutable value for alignment control
73
80
  font-size: inherit;
74
81
  font-weight: var(--#{$breadcrumb}__link--FontWeight);
75
82
  line-height: inherit;
package/components/Button/button.css CHANGED
@@ -90,7 +90,7 @@
90
90
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
91
91
  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
92
92
  --pf-v5-c-button--m-link--m-inline--hover--MixBlendMode: normal;
93
- --pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode: normal
93
+ --pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode: normal;
94
94
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
95
95
  --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-t--global--spacer--sm));
96
96
  --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -149,28 +149,28 @@
149
149
  --pf-v5-c-button--m-stateful--PaddingRight: var(--pf-t--global--spacer--md);
150
150
  --pf-v5-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
151
151
  --pf-v5-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
152
- --pf-v5-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--hover);
152
+ --pf-v5-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
153
153
  --pf-v5-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
154
- --pf-v5-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--clicked);
154
+ --pf-v5-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
155
155
  --pf-v5-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
156
- --pf-v5-c-button--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
157
- --pf-v5-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
158
- --pf-v5-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
159
- --pf-v5-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
160
- --pf-v5-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
161
- --pf-v5-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
162
- --pf-v5-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
163
- --pf-v5-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
164
- --pf-v5-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
165
- --pf-v5-c-button--m-attention--Color: var(--pf-t--global--text--color--status--on-danger--default);
166
- --pf-v5-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
167
- --pf-v5-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
168
- --pf-v5-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
169
- --pf-v5-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
170
- --pf-v5-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
171
- --pf-v5-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
172
- --pf-v5-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
173
- --pf-v5-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
156
+ --pf-v5-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
157
+ --pf-v5-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default--default);
158
+ --pf-v5-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
159
+ --pf-v5-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
160
+ --pf-v5-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--default--hover);
161
+ --pf-v5-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
162
+ --pf-v5-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
163
+ --pf-v5-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--default--clicked);
164
+ --pf-v5-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
165
+ --pf-v5-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
166
+ --pf-v5-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
167
+ --pf-v5-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
168
+ --pf-v5-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
169
+ --pf-v5-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
170
+ --pf-v5-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
171
+ --pf-v5-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
172
+ --pf-v5-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
173
+ --pf-v5-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
174
174
  --pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
175
175
  --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
176
176
  --pf-v5-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
@@ -226,7 +226,7 @@
226
226
  --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
227
227
  --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
228
228
  --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
229
- --pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
229
+ --pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
230
230
  --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
231
231
  --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
232
232
  --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
package/components/Button/button.scss CHANGED
@@ -106,7 +106,7 @@
106
106
  --#{$button}--m-link--m-inline--PaddingLeft: 0;
107
107
  --#{$button}--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
108
108
  --#{$button}--m-link--m-inline--hover--MixBlendMode: normal;
109
- --#{$button}--m-link--m-inline--m-clicked--MixBlendMode: normal
109
+ --#{$button}--m-link--m-inline--m-clicked--MixBlendMode: normal;
110
110
  --#{$button}--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
111
111
  --#{$button}--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--#{$button}--m-link--m-inline__progress--Left) + 1rem + var(--pf-t--global--spacer--sm));
112
112
  --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -175,32 +175,32 @@
175
175
  // Read
176
176
  --#{$button}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
177
177
  --#{$button}--m-read--BorderColor: var(--pf-t--global--border--color--default);
178
- --#{$button}--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--hover);
178
+ --#{$button}--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
179
179
  --#{$button}--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
180
- --#{$button}--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--clicked);
180
+ --#{$button}--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
181
181
  --#{$button}--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
182
182
 
183
183
  // Unread
184
- --#{$button}--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
185
- --#{$button}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
186
- --#{$button}--m-unread__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
187
- --#{$button}--m-unread--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
188
- --#{$button}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
189
- --#{$button}--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
190
- --#{$button}--m-unread--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
191
- --#{$button}--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
192
- --#{$button}--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
184
+ --#{$button}--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
185
+ --#{$button}--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default--default);
186
+ --#{$button}--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
187
+ --#{$button}--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
188
+ --#{$button}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--default--hover);
189
+ --#{$button}--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
190
+ --#{$button}--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
191
+ --#{$button}--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--default--clicked);
192
+ --#{$button}--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
193
193
 
194
194
  // Attention
195
- --#{$button}--m-attention--Color: var(--pf-t--global--text--color--status--on-danger--default);
196
- --#{$button}--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
197
- --#{$button}--m-attention__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
198
- --#{$button}--m-attention--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
199
- --#{$button}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
200
- --#{$button}--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
201
- --#{$button}--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
202
- --#{$button}--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
203
- --#{$button}--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
195
+ --#{$button}--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
196
+ --#{$button}--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
197
+ --#{$button}--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
198
+ --#{$button}--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
199
+ --#{$button}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
200
+ --#{$button}--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
201
+ --#{$button}--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
202
+ --#{$button}--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
203
+ --#{$button}--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
204
204
 
205
205
  // Warning
206
206
  --#{$button}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
@@ -272,7 +272,7 @@
272
272
 
273
273
  // Count
274
274
  --#{$button}__count--MarginLeft: var(--#{$pf-global}--spacer--sm);
275
- --#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
275
+ --#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
276
276
  --#{$button}--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
277
277
  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
278
278
  --#{$button}--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
package/components/DataList/data-list.css CHANGED
@@ -541,7 +541,7 @@
541
541
  --pf-v5-c-data-list__expandable-content-body--BorderRadius: var(--pf-t--global--border--radius--small);
542
542
  --pf-v5-c-data-list--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
543
543
  --pf-v5-c-data-list--m-compact--LineHeight: var(--pf-t--global--font--line-height--body);
544
- --pf-v5-c-data-list--m-compact__check--FontSize: var(--pf-t--global--font--size--body--md);
544
+ --pf-v5-c-data-list--m-compact__check--FontSize: var(--pf-t--global--font--size--body--default);
545
545
  --pf-v5-c-data-list--m-compact__cell--PaddingTop: var(--pf-t--global--spacer--sm);
546
546
  --pf-v5-c-data-list--m-compact__cell--PaddingBottom: var(--pf-t--global--spacer--sm);
547
547
  --pf-v5-c-data-list--m-compact__cell--md--PaddingBottom: 0;
package/components/DataList/data-list.scss CHANGED
@@ -122,7 +122,7 @@
122
122
  // compact
123
123
  --#{$data-list}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
124
124
  --#{$data-list}--m-compact--LineHeight: var(--pf-t--global--font--line-height--body);
125
- --#{$data-list}--m-compact__check--FontSize: var(--pf-t--global--font--size--body--md);
125
+ --#{$data-list}--m-compact__check--FontSize: var(--pf-t--global--font--size--body--default);
126
126
  --#{$data-list}--m-compact__cell--PaddingTop: var(--pf-t--global--spacer--sm);
127
127
  --#{$data-list}--m-compact__cell--PaddingBottom: var(--pf-t--global--spacer--sm);
128
128
  --#{$data-list}--m-compact__cell--md--PaddingBottom: 0;
package/components/Form/form.css CHANGED
@@ -50,13 +50,13 @@
50
50
  --pf-v5-c-form__field-group--BorderBottomColor: var(--pf-t--global--border--color--default);
51
51
  --pf-v5-c-form__field-group--field-group--MarginTop: calc(var(--pf-v5-c-form--GridGap) * -1);
52
52
  --pf-v5-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v5-c-form__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs));
53
- --pf-v5-c-form__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
53
+ --pf-v5-c-form__field-group-toggle--PaddingTop: var(--pf-v5-c-form__field-group-header--PaddingTop);
54
54
  --pf-v5-c-form__field-group-toggle--PaddingRight: var(--pf-t--global--spacer--xs);
55
55
  --pf-v5-c-form__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
56
56
  --pf-v5-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
57
57
  --pf-v5-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--pf-v5-c-form__field-group-header-toggle--BorderWidth--base);
58
- --pf-v5-c-form__field-group-toggle-button--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
59
- --pf-v5-c-form__field-group-toggle-button--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
58
+ --pf-v5-c-form__field-group-toggle-button--MarginTop: calc(var(--pf-v5-c-button--m-plain--PaddingTop) * -1);
59
+ --pf-v5-c-form__field-group-toggle-button--MarginBottom: calc(var(--pf-v5-c-button--m-plain--PaddingBottom) * -1);
60
60
  --pf-v5-c-form__field-group-toggle-icon--Transition: var(--pf-v5-global--Transition);
61
61
  --pf-v5-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
62
62
  --pf-v5-c-form__field-group-toggle-icon--Rotate: 0;
@@ -70,8 +70,6 @@
70
70
  --pf-v5-c-form__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--pf-v5-c-form__field-group-header-toggle--BorderWidth--base);
71
71
  --pf-v5-c-form__field-group-header-description--MarginTop: var(--pf-t--global--spacer--xs);
72
72
  --pf-v5-c-form__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
73
- --pf-v5-c-form__field-group-header-actions--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
74
- --pf-v5-c-form__field-group-header-actions--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
75
73
  --pf-v5-c-form__field-group-header-actions--MarginLeft: var(--pf-t--global--spacer--sm);
76
74
  --pf-v5-c-form__field-group-body--PaddingTop: var(--pf-t--global--spacer--lg);
77
75
  --pf-v5-c-form__field-group-body--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -444,8 +442,6 @@
444
442
  }
445
443
 
446
444
  .pf-v5-c-form__field-group-header-actions {
447
- margin-block-start: var(--pf-v5-c-form__field-group-header-actions--MarginTop);
448
- margin-block-end: var(--pf-v5-c-form__field-group-header-actions--MarginBottom);
449
445
  margin-inline-start: var(--pf-v5-c-form__field-group-header-actions--MarginLeft);
450
446
  white-space: nowrap;
451
447
  }
package/components/Form/form.scss CHANGED
@@ -126,13 +126,13 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
126
126
  --#{$form}__field-group--BorderBottomColor: var(--pf-t--global--border--color--default);
127
127
  --#{$form}__field-group--field-group--MarginTop: calc(var(--#{$form}--GridGap) * -1);
128
128
  --#{$form}__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$form}__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs)); // based off of the expected width of the group toggle, for use to define a column when the toggle is not present
129
- --#{$form}__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
129
+ --#{$form}__field-group-toggle--PaddingTop: var(--#{$form}__field-group-header--PaddingTop);
130
130
  --#{$form}__field-group-toggle--PaddingRight: var(--pf-t--global--spacer--xs);
131
131
  --#{$form}__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
132
132
  --#{$form}__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
133
133
  --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
134
- --#{$form}__field-group-toggle-button--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
135
- --#{$form}__field-group-toggle-button--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
134
+ --#{$form}__field-group-toggle-button--MarginTop: calc(var(--#{$button}--m-plain--PaddingTop) * -1);
135
+ --#{$form}__field-group-toggle-button--MarginBottom: calc(var(--#{$button}--m-plain--PaddingBottom) * -1);
136
136
  --#{$form}__field-group-toggle-icon--Transition: var(--#{$pf-global}--Transition);
137
137
  --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
138
138
  --#{$form}__field-group-toggle-icon--Rotate: 0;
@@ -146,8 +146,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
146
146
  --#{$form}__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
147
147
  --#{$form}__field-group-header-description--MarginTop: var(--pf-t--global--spacer--xs);
148
148
  --#{$form}__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
149
- --#{$form}__field-group-header-actions--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
150
- --#{$form}__field-group-header-actions--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
151
149
  --#{$form}__field-group-header-actions--MarginLeft: var(--pf-t--global--spacer--sm);
152
150
  --#{$form}__field-group-body--PaddingTop: var(--pf-t--global--spacer--lg);
153
151
  --#{$form}__field-group-body--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -443,8 +441,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
443
441
  }
444
442
 
445
443
  .#{$form}__field-group-header-actions {
446
- margin-block-start: var(--#{$form}__field-group-header-actions--MarginTop);
447
- margin-block-end: var(--#{$form}__field-group-header-actions--MarginBottom);
448
444
  margin-inline-start: var(--#{$form}__field-group-header-actions--MarginLeft);
449
445
  white-space: nowrap;
450
446
  }
package/components/FormControl/form-control.css CHANGED
@@ -23,9 +23,9 @@
23
23
  --pf-v5-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
24
24
  --pf-v5-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
25
25
  --pf-v5-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
26
- --pf-v5-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--active);
26
+ --pf-v5-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
27
27
  --pf-v5-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
28
- --pf-v5-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--active);
28
+ --pf-v5-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
29
29
  --pf-v5-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
30
30
  --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);
31
31
  --pf-v5-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -35,7 +35,7 @@
35
35
  --pf-v5-c-form-control--m-readonly--BorderColor: transparent;
36
36
  --pf-v5-c-form-control--m-readonly--hover--after--BorderColor: revert;
37
37
  --pf-v5-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
38
- --pf-v5-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--active);
38
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
39
39
  --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
40
40
  --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
41
41
  --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
package/components/FormControl/form-control.scss CHANGED
@@ -29,11 +29,11 @@
29
29
 
30
30
  // focus
31
31
  --#{$form-control}--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
32
- --#{$form-control}--focus--after--BorderColor: var(--pf-t--global--border--color--active);
32
+ --#{$form-control}--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
33
33
 
34
34
  // expanded
35
35
  --#{$form-control}--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
36
- --#{$form-control}--m-expanded--after--BorderColor: var(--pf-t--global--border--color--active);
36
+ --#{$form-control}--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
37
37
 
38
38
  // placeholder
39
39
  --#{$form-control}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -49,7 +49,7 @@
49
49
  --#{$form-control}--m-readonly--BorderColor: transparent;
50
50
  --#{$form-control}--m-readonly--hover--after--BorderColor: revert;
51
51
  --#{$form-control}--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
52
- --#{$form-control}--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--active);
52
+ --#{$form-control}--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
53
53
 
54
54
  // readonly plain
55
55
  --#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
package/components/Login/login.css CHANGED
@@ -39,13 +39,7 @@
39
39
  --pf-v5-c-login__main-footer-links--PaddingRight: var(--pf-t--global--spacer--3xl);
40
40
  --pf-v5-c-login__main-footer-links--PaddingBottom: var(--pf-t--global--spacer--xl);
41
41
  --pf-v5-c-login__main-footer-links--PaddingLeft: var(--pf-t--global--spacer--3xl);
42
- --pf-v5-c-login__main-footer-links-item--PaddingRight: var(--pf-t--global--spacer--md);
43
- --pf-v5-c-login__main-footer-links-item--PaddingLeft: var(--pf-t--global--spacer--md);
44
- --pf-v5-c-login__main-footer-links-item--MarginBottom: var(--pf-t--global--spacer--sm);
45
- --pf-v5-c-login__main-footer-links-item-link-svg--Fill: var(--pf-t--global--icon--color--subtle);
46
- --pf-v5-c-login__main-footer-links-item-link-svg--Width: var(--pf-t--global--icon--size--lg);
47
- --pf-v5-c-login__main-footer-links-item-link-svg--Height: var(--pf-t--global--icon--size--lg);
48
- --pf-v5-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-t--global--icon--color--nonstatus--hover);
42
+ --pf-v5-c-login__main-footer-links--Gap: var(--pf-t--global--spacer--md);
49
43
  --pf-v5-c-login__main-footer-band--PaddingTop: var(--pf-t--global--spacer--lg);
50
44
  --pf-v5-c-login__main-footer-band--PaddingRight: var(--pf-t--global--spacer--md);
51
45
  --pf-v5-c-login__main-footer-band--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -224,6 +218,7 @@
224
218
  .pf-v5-c-login__main-footer-links {
225
219
  display: flex;
226
220
  flex-wrap: wrap;
221
+ gap: var(--pf-v5-c-login__main-footer-links--Gap);
227
222
  justify-content: center;
228
223
  padding-block-start: var(--pf-v5-c-login__main-footer-links--PaddingTop);
229
224
  padding-block-end: var(--pf-v5-c-login__main-footer-links--PaddingBottom);
@@ -231,23 +226,6 @@
231
226
  padding-inline-end: var(--pf-v5-c-login__main-footer-links--PaddingRight);
232
227
  }
233
228
 
234
- .pf-v5-c-login__main-footer-links-item {
235
- padding-inline-start: var(--pf-v5-c-login__main-footer-links-item--PaddingLeft);
236
- padding-inline-end: var(--pf-v5-c-login__main-footer-links-item--PaddingRight);
237
- margin-block-end: var(--pf-v5-c-login__main-footer-links-item--MarginBottom);
238
- }
239
-
240
- .pf-v5-c-login__main-footer-links-item-link svg {
241
- width: 100%;
242
- max-width: var(--pf-v5-c-login__main-footer-links-item-link-svg--Width);
243
- height: 100%;
244
- max-height: var(--pf-v5-c-login__main-footer-links-item-link-svg--Height);
245
- fill: var(--pf-v5-c-login__main-footer-links-item-link-svg--Fill);
246
- }
247
- .pf-v5-c-login__main-footer-links-item-link:hover svg {
248
- fill: var(--pf-v5-c-login__main-footer-links-item-link-svg--hover--Fill);
249
- }
250
-
251
229
  .pf-v5-c-login__main-footer-band {
252
230
  padding-block-start: var(--pf-v5-c-login__main-footer-band--PaddingTop);
253
231
  padding-block-end: var(--pf-v5-c-login__main-footer-band--PaddingBottom);
package/components/Login/login.scss CHANGED
@@ -86,13 +86,7 @@
86
86
  --#{$login}__main-footer-links--PaddingRight: var(--pf-t--global--spacer--3xl);
87
87
  --#{$login}__main-footer-links--PaddingBottom: var(--pf-t--global--spacer--xl);
88
88
  --#{$login}__main-footer-links--PaddingLeft: var(--pf-t--global--spacer--3xl);
89
- --#{$login}__main-footer-links-item--PaddingRight: var(--pf-t--global--spacer--md);
90
- --#{$login}__main-footer-links-item--PaddingLeft: var(--pf-t--global--spacer--md);
91
- --#{$login}__main-footer-links-item--MarginBottom: var(--pf-t--global--spacer--sm);
92
- --#{$login}__main-footer-links-item-link-svg--Fill: var(--pf-t--global--icon--color--subtle);
93
- --#{$login}__main-footer-links-item-link-svg--Width: var(--pf-t--global--icon--size--lg);
94
- --#{$login}__main-footer-links-item-link-svg--Height: var(--pf-t--global--icon--size--lg);
95
- --#{$login}__main-footer-links-item-link-svg--hover--Fill: var(--pf-t--global--icon--color--nonstatus--hover); // TODO is this needed?
89
+ --#{$login}__main-footer-links--Gap: var(--pf-t--global--spacer--md);
96
90
  --#{$login}__main-footer-band--PaddingTop: var(--pf-t--global--spacer--lg);
97
91
  --#{$login}__main-footer-band--PaddingRight: var(--pf-t--global--spacer--md);
98
92
  --#{$login}__main-footer-band--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -244,6 +238,7 @@
244
238
  .#{$login}__main-footer-links {
245
239
  display: flex;
246
240
  flex-wrap: wrap;
241
+ gap: var(--#{$login}__main-footer-links--Gap);
247
242
  justify-content: center;
248
243
  padding-block-start: var(--#{$login}__main-footer-links--PaddingTop);
249
244
  padding-block-end: var(--#{$login}__main-footer-links--PaddingBottom);
@@ -251,28 +246,6 @@
251
246
  padding-inline-end: var(--#{$login}__main-footer-links--PaddingRight);
252
247
  }
253
248
 
254
- .#{$login}__main-footer-links-item {
255
- padding-inline-start: var(--#{$login}__main-footer-links-item--PaddingLeft);
256
- padding-inline-end: var(--#{$login}__main-footer-links-item--PaddingRight);
257
- margin-block-end: var(--#{$login}__main-footer-links-item--MarginBottom);
258
- }
259
-
260
- .#{$login}__main-footer-links-item-link {
261
- svg {
262
- width: 100%;
263
- max-width: var(--#{$login}__main-footer-links-item-link-svg--Width);
264
- height: 100%;
265
- max-height: var(--#{$login}__main-footer-links-item-link-svg--Height);
266
- fill: var(--#{$login}__main-footer-links-item-link-svg--Fill);
267
- }
268
-
269
- &:hover {
270
- svg {
271
- fill: var(--#{$login}__main-footer-links-item-link-svg--hover--Fill);
272
- }
273
- }
274
- }
275
-
276
249
  .#{$login}__main-footer-band {
277
250
  padding-block-start: var(--#{$login}__main-footer-band--PaddingTop);
278
251
  padding-block-end: var(--#{$login}__main-footer-band--PaddingBottom);