@patternfly/patternfly 6.0.0-alpha.84 → 6.0.0-alpha.86

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 (34) hide show
  1. package/components/Accordion/accordion.css +1 -1
  2. package/components/Accordion/accordion.scss +1 -1
  3. package/components/Button/button.css +21 -21
  4. package/components/Button/button.scss +21 -21
  5. package/components/DataList/data-list.css +1 -1
  6. package/components/DataList/data-list.scss +1 -1
  7. package/components/DualListSelector/dual-list-selector.css +3 -8
  8. package/components/DualListSelector/dual-list-selector.scss +5 -11
  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 +5 -22
  14. package/components/Login/login.scss +5 -25
  15. package/components/NotificationBadge/notification-badge.css +4 -4
  16. package/components/NotificationBadge/notification-badge.scss +4 -4
  17. package/components/Pagination/pagination.css +1 -1
  18. package/components/Pagination/pagination.scss +1 -1
  19. package/components/Table/table-grid.css +3 -3
  20. package/components/Table/table-grid.scss +3 -3
  21. package/components/Table/table-tree-view.css +5 -5
  22. package/components/Table/table-tree-view.scss +1 -1
  23. package/components/Table/table.css +8 -8
  24. package/components/Table/table.scss +8 -8
  25. package/components/Tabs/tabs.css +1 -1
  26. package/components/Tabs/tabs.scss +1 -1
  27. package/docs/components/DualListSelector/examples/DualListSelector.md +16 -16
  28. package/docs/components/Login/examples/Login.md +150 -100
  29. package/package.json +1 -1
  30. package/patternfly-no-globals.css +59 -85
  31. package/patternfly-theme-dark-unversioned.css +59 -85
  32. package/patternfly.css +59 -85
  33. package/patternfly.min.css +1 -1
  34. package/patternfly.min.css.map +1 -1
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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;
@@ -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;
@@ -24,7 +24,6 @@
24
24
  --pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
25
25
  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
26
26
  --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
27
- --pf-v5-c-dual-list-selector__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
28
27
  --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
29
28
  --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
30
29
  --pf-v5-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
@@ -38,7 +37,7 @@
38
37
  --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
39
38
  --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-t--global--text--color--subtle);
40
39
  --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
41
- --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default);
40
+ --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--text--color--disabled);
42
41
  --pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-t--global--spacer--sm);
43
42
  --pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-t--global--font--size--sm);
44
43
  --pf-v5-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
@@ -55,7 +54,7 @@
55
54
  --pf-v5-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
56
55
  --pf-v5-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-v5-global--Transition);
57
56
  --pf-v5-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
58
- --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
57
+ --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
59
58
  }
60
59
 
61
60
  .pf-v5-c-dual-list-selector {
@@ -165,10 +164,6 @@
165
164
  display: flex;
166
165
  font-size: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
167
166
  background-color: var(--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor);
168
- border-radius: var(--pf-v5-c-dual-list-selector__list-item-row--BorderRadius);
169
- }
170
- .pf-v5-c-dual-list-selector__list-item-row:hover {
171
- --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
172
167
  }
173
168
  .pf-v5-c-dual-list-selector__list-item-row.pf-m-selected {
174
169
  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
@@ -177,7 +172,7 @@
177
172
  --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color);
178
173
  font-weight: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
179
174
  }
180
- .pf-v5-c-dual-list-selector__list-item-row.pf-m-selected:hover {
175
+ .pf-v5-c-dual-list-selector__list-item-row:hover {
181
176
  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
182
177
  }
183
178
  .pf-v5-c-dual-list-selector__list-item-row.pf-m-check {
@@ -38,7 +38,6 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
38
38
  --#{$dual-list-selector}__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
39
39
  --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
40
40
  --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
41
- --#{$dual-list-selector}__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
42
41
  --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
43
42
  --#{$dual-list-selector}__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
44
43
  --#{$dual-list-selector}__list-item--m-ghost-row--Opacity: .4;
@@ -56,7 +55,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
56
55
  // Item text
57
56
  --#{$dual-list-selector}__item-text--Color: var(--pf-t--global--text--color--subtle);
58
57
  --#{$dual-list-selector}__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
59
- --#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default); // token?
58
+ --#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--pf-t--global--text--color--disabled);
60
59
 
61
60
  // Status
62
61
  --#{$dual-list-selector}__status--MarginBottom: var(--pf-t--global--spacer--sm);
@@ -85,7 +84,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
85
84
  --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
86
85
  --#{$dual-list-selector}__item-toggle-icon--Transition: var(--#{$pf-global}--Transition); // need token
87
86
  --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
88
- --#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
87
+ --#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
89
88
  }
90
89
 
91
90
  .#{$dual-list-selector} {
@@ -215,11 +214,6 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
215
214
  display: flex;
216
215
  font-size: var(--#{$dual-list-selector}__list-item-row--FontSize);
217
216
  background-color: var(--#{$dual-list-selector}__list-item-row--BackgroundColor);
218
- border-radius: var(--#{$dual-list-selector}__list-item-row--BorderRadius);
219
-
220
- &:hover {
221
- --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
222
- }
223
217
 
224
218
  &.pf-m-selected {
225
219
  --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor);
@@ -229,10 +223,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
229
223
 
230
224
  font-weight: var(--#{$dual-list-selector}__list-item-row--m-selected__text--FontWeight);
231
225
  }
226
+ }
232
227
 
233
- &:hover {
234
- --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
235
- }
228
+ &:hover {
229
+ --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
236
230
  }
237
231
 
238
232
  &.pf-m-check {
@@ -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
  }
@@ -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
  }
@@ -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;
@@ -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;
@@ -39,13 +39,8 @@
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);
43
+ --pf-v5-c-login__main-footer-links-item--c-button--FontSize: var(--pf-t--global--icon--size--xl);
49
44
  --pf-v5-c-login__main-footer-band--PaddingTop: var(--pf-t--global--spacer--lg);
50
45
  --pf-v5-c-login__main-footer-band--PaddingRight: var(--pf-t--global--spacer--md);
51
46
  --pf-v5-c-login__main-footer-band--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -224,6 +219,7 @@
224
219
  .pf-v5-c-login__main-footer-links {
225
220
  display: flex;
226
221
  flex-wrap: wrap;
222
+ gap: var(--pf-v5-c-login__main-footer-links--Gap);
227
223
  justify-content: center;
228
224
  padding-block-start: var(--pf-v5-c-login__main-footer-links--PaddingTop);
229
225
  padding-block-end: var(--pf-v5-c-login__main-footer-links--PaddingBottom);
@@ -231,21 +227,8 @@
231
227
  padding-inline-end: var(--pf-v5-c-login__main-footer-links--PaddingRight);
232
228
  }
233
229
 
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);
230
+ .pf-v5-c-login__main-footer-links-item .pf-v5-c-button {
231
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-login__main-footer-links-item--c-button--FontSize);
249
232
  }
250
233
 
251
234
  .pf-v5-c-login__main-footer-band {
@@ -86,13 +86,8 @@
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);
90
+ --#{$login}__main-footer-links-item--c-button--FontSize: var(--pf-t--global--icon--size--xl);
96
91
  --#{$login}__main-footer-band--PaddingTop: var(--pf-t--global--spacer--lg);
97
92
  --#{$login}__main-footer-band--PaddingRight: var(--pf-t--global--spacer--md);
98
93
  --#{$login}__main-footer-band--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -244,6 +239,7 @@
244
239
  .#{$login}__main-footer-links {
245
240
  display: flex;
246
241
  flex-wrap: wrap;
242
+ gap: var(--#{$login}__main-footer-links--Gap);
247
243
  justify-content: center;
248
244
  padding-block-start: var(--#{$login}__main-footer-links--PaddingTop);
249
245
  padding-block-end: var(--#{$login}__main-footer-links--PaddingBottom);
@@ -252,24 +248,8 @@
252
248
  }
253
249
 
254
250
  .#{$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
- }
251
+ .#{$button}{
252
+ --#{$button}--FontSize: var(--#{$login}__main-footer-links-item--c-button--FontSize);
273
253
  }
274
254
  }
275
255
 
@@ -16,18 +16,18 @@
16
16
  --pf-v5-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
17
17
  --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
18
18
  --pf-v5-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
19
- --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
19
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
20
20
  --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
21
21
  --pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
22
- --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
22
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
23
23
  --pf-v5-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
24
24
  --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
25
25
  --pf-v5-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
26
- --pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--active);
26
+ --pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
27
27
  --pf-v5-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
28
28
  --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
29
29
  --pf-v5-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
30
- --pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--active);
30
+ --pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
31
31
  }
32
32
 
33
33
  .pf-v5-c-notification-badge {
@@ -22,22 +22,22 @@
22
22
  --#{$notification-badge}--m-read--Color: var(--pf-t--global--text--color--regular);
23
23
  --#{$notification-badge}--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
24
24
  --#{$notification-badge}--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
25
- --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
25
+ --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
26
26
  --#{$notification-badge}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
27
27
  --#{$notification-badge}--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
28
- --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
28
+ --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
29
29
 
30
30
  // Unread
31
31
  --#{$notification-badge}--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
32
32
  --#{$notification-badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
33
33
  --#{$notification-badge}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
34
- --#{$notification-badge}--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--active);
34
+ --#{$notification-badge}--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
35
35
 
36
36
  // Attention
37
37
  --#{$notification-badge}--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
38
38
  --#{$notification-badge}--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
39
39
  --#{$notification-badge}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
40
- --#{$notification-badge}--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--active);
40
+ --#{$notification-badge}--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
41
41
  }
42
42
 
43
43
  .#{$notification-badge} {
@@ -15,7 +15,7 @@
15
15
  --pf-v5-c-pagination--m-display-summary__nav--Display: none;
16
16
  --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
17
17
  --pf-v5-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
18
- --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--md);
18
+ --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
19
19
  --pf-v5-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
20
20
  --pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v5-c-form-control--PaddingRight) + var(--pf-v5-c-form-control--PaddingLeft)) + (var(--pf-v5-c-form-control--before--BorderWidth) * 2));
21
21
  --pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;
@@ -17,7 +17,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
17
17
  --#{$pagination}__nav--ColumnGap: var(--pf-t--global--spacer--sm);
18
18
 
19
19
  // nav page select
20
- --#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--md);
20
+ --#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
21
21
  --#{$pagination}__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
22
22
  --#{$pagination}__nav-page-select--c-form-control--width-base: calc((var(--#{$form-control}--PaddingRight) + var(--#{$form-control}--PaddingLeft)) + (var(--#{$form-control}--before--BorderWidth) * 2));
23
23
  --#{$pagination}__nav-page-select--c-form-control--width-chars: 2;
@@ -3,7 +3,7 @@
3
3
  --pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
4
4
  --pf-v5-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
5
5
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
6
- --pf-v5-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
6
+ --pf-v5-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--clicked);
7
7
  --pf-v5-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
8
8
  --pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth: var(--pf-v5-c-table__tbody--responsive--border-width--base);
9
9
  --pf-v5-c-table__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
@@ -19,9 +19,9 @@
19
19
  --pf-v5-c-table__tbody--after__tr--BorderLeftWidth: 0;
20
20
  --pf-v5-c-table__tbody--after__tr--BorderLeftColor: transparent;
21
21
  --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
22
- --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
22
+ --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
23
23
  --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
24
- --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
24
+ --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
25
25
  --pf-v5-c-table--m-grid--cell--hidden-visible--Display: grid;
26
26
  --pf-v5-c-table--m-grid--cell--PaddingTop: 0;
27
27
  --pf-v5-c-table--m-grid--cell--PaddingRight: 0;
@@ -44,7 +44,7 @@
44
44
  --#{$table}__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
45
45
  --#{$table}__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
46
46
  --#{$table}__tbody--after--BorderLeftWidth: 0;
47
- --#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
47
+ --#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--clicked);
48
48
 
49
49
  // Row
50
50
  --#{$table}__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
@@ -66,11 +66,11 @@
66
66
  --#{$table}__tbody--after__tr--BorderLeftWidth: 0;
67
67
  --#{$table}__tbody--after__tr--BorderLeftColor: transparent;
68
68
  --#{$table}__tbody--m-expanded--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
69
- --#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
69
+ --#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
70
70
 
71
71
  // selected
72
72
  --#{$table}__tbody--m-selected--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
73
- --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
73
+ --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--clicked);
74
74
 
75
75
  // Cell display
76
76
  --#{$table}--m-grid--cell--hidden-visible--Display: grid;