@patternfly/patternfly 6.0.0-alpha.45 → 6.0.0-alpha.46

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 (27) hide show
  1. package/components/Check/check.css +17 -16
  2. package/components/Check/check.scss +17 -20
  3. package/components/Form/form.css +68 -87
  4. package/components/Form/form.scss +67 -98
  5. package/components/FormControl/form-control.css +86 -111
  6. package/components/FormControl/form-control.scss +88 -92
  7. package/components/NotificationDrawer/notification-drawer.css +104 -115
  8. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  9. package/components/Radio/radio.css +15 -11
  10. package/components/Radio/radio.scss +15 -15
  11. package/components/SimpleList/simple-list.css +1 -1
  12. package/components/SimpleList/simple-list.scss +1 -1
  13. package/docs/components/Form/examples/Form.md +23 -11
  14. package/docs/demos/Alert/examples/Alert.md +24 -0
  15. package/docs/demos/Form/examples/BasicForms.md +31 -10
  16. package/docs/demos/Modal/examples/Modal.md +3 -3
  17. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  18. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  19. package/package.json +1 -1
  20. package/patternfly-no-globals.css +292 -342
  21. package/patternfly-theme-dark-unversioned.css +292 -342
  22. package/patternfly.css +292 -342
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
  25. package/components/Form/themes/dark/form.scss +0 -7
  26. package/components/FormControl/themes/dark/form-control.scss +0 -24
  27. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
package/components/NotificationDrawer/notification-drawer.scss CHANGED
@@ -1,104 +1,112 @@
1
1
  // @debug $notification-drawer; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$notification-drawer} {
4
- --#{$notification-drawer}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
5
+ --#{$notification-drawer}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
5
6
 
6
7
  // Header
7
- --#{$notification-drawer}__header--PaddingTop: var(--#{$pf-global}--spacer--md);
8
- --#{$notification-drawer}__header--PaddingRight: var(--#{$pf-global}--spacer--md);
9
- --#{$notification-drawer}__header--PaddingBottom: var(--#{$pf-global}--spacer--md);
10
- --#{$notification-drawer}__header--PaddingLeft: var(--#{$pf-global}--spacer--md);
11
- --#{$notification-drawer}__header--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
12
- --#{$notification-drawer}__header--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom);
13
- --#{$notification-drawer}__header--ZIndex: var(--#{$pf-global}--ZIndex--sm);
14
- --#{$notification-drawer}__header-title--FontSize: var(--#{$pf-global}--FontSize--xl);
15
- --#{$notification-drawer}__header-status--MarginLeft: var(--#{$pf-global}--spacer--md);
8
+ --#{$notification-drawer}__header--PaddingTop: var(--pf-t--global--spacer--md);
9
+ --#{$notification-drawer}__header--PaddingRight: var(--pf-t--global--spacer--lg);
10
+ --#{$notification-drawer}__header--PaddingBottom: var(--pf-t--global--spacer--md);
11
+ --#{$notification-drawer}__header--PaddingLeft: var(--pf-t--global--spacer--lg);
12
+ --#{$notification-drawer}__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13
+ --#{$notification-drawer}__header--ZIndex: var(--pf-t--global--Zindex--sm);
14
+ --#{$notification-drawer}__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
15
+ --#{$notification-drawer}__header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
16
+ --#{$notification-drawer}__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
17
+ --#{$notification-drawer}__header-title--FontFamily: var(--pf-t--global--font--family--heading);
18
+ --#{$notification-drawer}__header-status--MarginLeft: var(--pf-t--global--spacer--md);
19
+ --#{$notification-drawer}__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
20
+ --#{$notification-drawer}__header-status--FontSize: var(--pf-t--global--font--size--body--default);
21
+ --#{$notification-drawer}__header-status--Color: var(--pf-t--global--text--color--subtle);
16
22
 
17
23
  // Body
18
- --#{$notification-drawer}__body--ZIndex: var(--#{$pf-global}--ZIndex--xs);
24
+ --#{$notification-drawer}__body--ZIndex: var(--pf-t--global--Zindex--xs);
25
+ --#{$notification-drawer}__body--PaddingBlockStart: 0; // TODO var(--pf-t--global--spacer--sm);
26
+ --#{$notification-drawer}__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
27
+
28
+ // List
29
+ --#{$notification-drawer}__list--Gap: var(--pf-t--global--spacer--sm);
30
+ --#{$notification-drawer}__list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
31
+ --#{$notification-drawer}__list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
19
32
 
20
33
  // List item
21
- --#{$notification-drawer}__list-item--PaddingTop: var(--#{$pf-global}--spacer--md);
22
- --#{$notification-drawer}__list-item--PaddingRight: var(--#{$pf-global}--spacer--md);
23
- --#{$notification-drawer}__list-item--PaddingBottom: var(--#{$pf-global}--spacer--md);
24
- --#{$notification-drawer}__list-item--PaddingLeft: var(--#{$pf-global}--spacer--md);
25
- --#{$notification-drawer}__list-item--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
26
- --#{$notification-drawer}__list-item--BoxShadow: inset var(--#{$pf-global}--BoxShadow--sm-bottom);
27
- --#{$notification-drawer}__list-item--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
28
- --#{$notification-drawer}__list-item--BorderBottomColor: transparent;
29
- --#{$notification-drawer}__list-item--OutlineOffset: #{pf-size-prem(-4px)};
30
- --#{$notification-drawer}__list-item--before--Width: var(--#{$pf-global}--BorderWidth--lg);
31
- --#{$notification-drawer}__list-item--before--Top: 0;
32
- --#{$notification-drawer}__list-item--before--Bottom: calc(var(--#{$notification-drawer}__list-item--BorderBottomWidth) * -1);
34
+ --#{$notification-drawer}__list-item--PaddingTop: var(--pf-t--global--spacer--md);
35
+ --#{$notification-drawer}__list-item--PaddingRight: var(--pf-t--global--spacer--md);
36
+ --#{$notification-drawer}__list-item--PaddingBottom: var(--pf-t--global--spacer--md);
37
+ --#{$notification-drawer}__list-item--PaddingLeft: var(--pf-t--global--spacer--md);
38
+ --#{$notification-drawer}__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
+ --#{$notification-drawer}__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
40
+ --#{$notification-drawer}__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
33
41
 
34
42
  // List item modifiers
35
- --#{$notification-drawer}__list-item--m-info__list-item-header-icon--Color: var(--#{$pf-global}--info-color--100);
36
- --#{$notification-drawer}__list-item--m-info__list-item--before--BackgroundColor: var(--#{$pf-global}--info-color--100);
37
- --#{$notification-drawer}__list-item--m-warning__list-item-header-icon--Color: var(--#{$pf-global}--warning-color--100);
38
- --#{$notification-drawer}__list-item--m-warning__list-item--before--BackgroundColor: var(--#{$pf-global}--warning-color--100);
39
- --#{$notification-drawer}__list-item--m-danger__list-item-header-icon--Color: var(--#{$pf-global}--danger-color--100);
40
- --#{$notification-drawer}__list-item--m-danger__list-item--before--BackgroundColor: var(--#{$pf-global}--danger-color--100);
41
- --#{$notification-drawer}__list-item--m-success__list-item-header-icon--Color: var(--#{$pf-global}--success-color--100);
42
- --#{$notification-drawer}__list-item--m-success__list-item--before--BackgroundColor: var(--#{$pf-global}--success-color--100);
43
- --#{$notification-drawer}__list-item--m-custom__list-item-header-icon--Color: var(--#{$pf-global}--custom-color--200);
44
- --#{$notification-drawer}__list-item--m-custom__list-item--before--BackgroundColor: var(--#{$pf-global}--custom-color--200);
45
- --#{$notification-drawer}__list-item--m-read--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
46
- --#{$notification-drawer}__list-item--m-read--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
47
- --#{$notification-drawer}__list-item--m-read--before--Top: calc(var(--#{$notification-drawer}__list-item--BorderBottomWidth) * -1);
48
- --#{$notification-drawer}__list-item--m-read--before--Bottom: 0;
49
- --#{$notification-drawer}__list-item--m-read--before--BackgroundColor: transparent;
50
- --#{$notification-drawer}__list-item--list-item--m-read--before--Top: 0;
51
- --#{$notification-drawer}__list-item--list-item--m-read--BoxShadow: inset var(--#{$pf-global}--BoxShadow--sm-bottom);
52
- --#{$notification-drawer}__list-item--m-hoverable--hover--ZIndex: var(--#{$pf-global}--ZIndex--xs);
53
- --#{$notification-drawer}__list-item--m-hoverable--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--md-top), var(--#{$pf-global}--BoxShadow--md-bottom);
43
+ --#{$notification-drawer}__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
44
+ --#{$notification-drawer}__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
45
+ --#{$notification-drawer}__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
46
+ --#{$notification-drawer}__list-item--m-warning__list-item--BorderColor: var(--pf-t--global--border--color--status--warning--default);
47
+ --#{$notification-drawer}__list-item--m-danger__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
48
+ --#{$notification-drawer}__list-item--m-danger__list-item--BorderColor: var(--pf-t--global--border--color--status--danger--default);
49
+ --#{$notification-drawer}__list-item--m-success__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--success--default);
50
+ --#{$notification-drawer}__list-item--m-success__list-item--BorderColor: var(--pf-t--global--border--color--status--success--default);
51
+ --#{$notification-drawer}__list-item--m-custom__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
52
+ --#{$notification-drawer}__list-item--m-custom__list-item--BorderColor: var(--pf-t--global--border--color--status--custom--default);
53
+ --#{$notification-drawer}__list-item--m-read--BackgroundColor: var(--pf-t--global--background--color--primary--default);
54
+ --#{$notification-drawer}__list-item--m-read--BorderWidth: var(--pf-t--global--border--width--box--status--read);
55
+ --#{$notification-drawer}__list-item--m-read--BorderColor: var(--pf-t--global--border--color--default);
56
+ --#{$notification-drawer}__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
54
57
 
55
58
  // List item header
56
- --#{$notification-drawer}__list-item-header--MarginBottom: var(--#{$pf-global}--spacer--xs);
59
+ --#{$notification-drawer}__list-item-header--MarginBottom: var(--pf-t--global--spacer--xs);
57
60
 
58
61
  // List item header icon
59
62
  --#{$notification-drawer}__list-item-header-icon--Color: inherit;
60
- --#{$notification-drawer}__list-item-header-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
63
+ --#{$notification-drawer}__list-item-header-icon--MarginRight: var(--pf-t--global--spacer--sm);
61
64
 
62
65
  // List item header title
63
- --#{$notification-drawer}__list-item-header-title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
66
+ --#{$notification-drawer}__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
67
+ --#{$notification-drawer}__list-item-header-title--FontSize: var(--pf-t--global--font--size--heading--xs);
68
+ --#{$notification-drawer}__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
69
+ --#{$notification-drawer}__list-item-header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
64
70
  --#{$notification-drawer}__list-item-header-title--max-lines: 1;
65
- --#{$notification-drawer}__list-item--m-read__list-item-header-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
66
71
 
67
72
  // List item description
68
- --#{$notification-drawer}__list-item-description--MarginBottom: var(--#{$pf-global}--spacer--sm);
73
+ --#{$notification-drawer}__list-item-description--MarginBottom: var(--pf-t--global--spacer--sm);
69
74
 
70
75
  // List item timestamp
71
- --#{$notification-drawer}__list-item-timestamp--Color: var(--#{$pf-global}--Color--200);
72
- --#{$notification-drawer}__list-item-timestamp--FontSize: var(--#{$pf-global}--FontSize--sm);
76
+ --#{$notification-drawer}__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
77
+ --#{$notification-drawer}__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
73
78
 
74
79
  // Group
75
- --#{$notification-drawer}__group--m-expanded--group--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
76
- --#{$notification-drawer}__group--m-expanded--group--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
80
+ --#{$notification-drawer}__group--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
81
+ --#{$notification-drawer}__group--m-expanded--group--BorderBottomColor: var(--pf-t--global--border--color--default);
77
82
  --#{$notification-drawer}__group--m-expanded--MinHeight: 0; // remove at breaking change
83
+ --#{$notification-drawer}__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
84
+
78
85
 
79
86
  // Group toggle
80
- --#{$notification-drawer}__group-toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
81
- --#{$notification-drawer}__group-toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
82
- --#{$notification-drawer}__group-toggle--PaddingBottom: var(--#{$pf-global}--spacer--md);
83
- --#{$notification-drawer}__group-toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
84
- --#{$notification-drawer}__group-toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
85
- --#{$notification-drawer}__group-toggle--BorderColor: var(--#{$pf-global}--BorderColor--100);
86
- --#{$notification-drawer}__group-toggle--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
87
+ --#{$notification-drawer}__group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
88
+ --#{$notification-drawer}__group-toggle--PaddingRight: var(--pf-t--global--spacer--lg);
89
+ --#{$notification-drawer}__group-toggle--PaddingBottom: var(--pf-t--global--spacer--md);
90
+ --#{$notification-drawer}__group-toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
91
+ --#{$notification-drawer}__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
87
92
  --#{$notification-drawer}__group-toggle--OutlineOffset: #{pf-size-prem(-4px)};
88
93
 
89
94
  // Group toggle title
90
- --#{$notification-drawer}__group-toggle-title--MarginRight: var(--#{$pf-global}--spacer--md);
95
+ --#{$notification-drawer}__group-toggle-title--MarginRight: var(--pf-t--global--spacer--md);
96
+ --#{$notification-drawer}__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
91
97
  --#{$notification-drawer}__group-toggle-title--max-lines: 1;
92
98
 
93
99
  // Group toggle count
94
- --#{$notification-drawer}__group-toggle-count--MarginRight: var(--#{$pf-global}--spacer--md);
100
+ --#{$notification-drawer}__group-toggle-count--MarginRight: var(--pf-t--global--spacer--md);
95
101
 
96
102
  // Group toggle icon
97
- --#{$notification-drawer}__group-toggle-icon--MarginRight: var(--#{$pf-global}--spacer--md);
98
- --#{$notification-drawer}__group-toggle-icon--Color: var(--#{$pf-global}--Color--200);
103
+ --#{$notification-drawer}__group-toggle-icon--MarginRight: var(--pf-t--global--spacer--md);
104
+ --#{$notification-drawer}__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
99
105
  --#{$notification-drawer}__group-toggle-icon--Transition: .2s ease-in 0s;
100
106
  --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: 90deg;
107
+ }
101
108
 
109
+ .#{$notification-drawer} {
102
110
  display: flex;
103
111
  flex-direction: column;
104
112
  height: 100%;
@@ -116,15 +124,20 @@
116
124
  padding-inline-start: var(--#{$notification-drawer}__header--PaddingLeft);
117
125
  padding-inline-end: var(--#{$notification-drawer}__header--PaddingRight);
118
126
  background-color: var(--#{$notification-drawer}__header--BackgroundColor);
119
- box-shadow: var(--#{$notification-drawer}__header--BoxShadow);
120
127
  }
121
128
 
122
129
  .#{$notification-drawer}__header-title {
130
+ font-family: var(--#{$notification-drawer}__header-title--FontFamily);
123
131
  font-size: var(--#{$notification-drawer}__header-title--FontSize);
132
+ font-weight: var(--#{$notification-drawer}__header-title--FontWeight);
133
+ line-height: var(--#{$notification-drawer}__header-title--LineHeight);
124
134
  }
125
135
 
126
136
  .#{$notification-drawer}__header-status {
127
137
  margin-inline-start: var(--#{$notification-drawer}__header-status--MarginLeft);
138
+ font-size: var(--#{$notification-drawer}__header-status--FontSize);
139
+ font-weight: var(--#{$notification-drawer}__header-status--FontWeight);
140
+ color: var(--#{$notification-drawer}__header-status--Color);
128
141
  }
129
142
 
130
143
  .#{$notification-drawer}__header-action {
@@ -135,8 +148,17 @@
135
148
 
136
149
  .#{$notification-drawer}__body {
137
150
  flex: 1;
151
+ padding-block-start: var(--#{$notification-drawer}__body--PaddingBlockStart);
152
+ padding-block-end: var(--#{$notification-drawer}__body--PaddingBlockEnd);
138
153
  overflow-y: auto;
139
- box-shadow: var(--#{$notification-drawer}__body--ZIndex);
154
+ }
155
+
156
+ .#{$notification-drawer}__list:not([hidden]) {
157
+ display: flex;
158
+ flex-direction: column;
159
+ gap: var(--#{$notification-drawer}__list--Gap);
160
+ padding-inline-start: var(--#{$notification-drawer}__list--PaddingInlineStart);
161
+ padding-inline-end: var(--#{$notification-drawer}__list--PaddingInlineEnd);
140
162
  }
141
163
 
142
164
  .#{$notification-drawer}__list-item {
@@ -148,61 +170,38 @@
148
170
  padding-inline-start: var(--#{$notification-drawer}__list-item--PaddingLeft);
149
171
  padding-inline-end: var(--#{$notification-drawer}__list-item--PaddingRight);
150
172
  background-color: var(--#{$notification-drawer}__list-item--BackgroundColor);
151
- border-block-end: var(--#{$notification-drawer}__list-item--BorderBottomWidth) solid var(--#{$notification-drawer}__list-item--BorderBottomColor);
152
- outline-offset: var(--#{$notification-drawer}__list-item--OutlineOffset);
153
- box-shadow: var(--#{$notification-drawer}__list-item--BoxShadow);
154
-
155
- &.pf-m-read,
156
- &:first-child {
157
- --#{$notification-drawer}__list-item--BoxShadow: none;
158
- }
159
-
160
- &:not(.pf-m-read) + &.pf-m-read {
161
- --#{$notification-drawer}__list-item--BoxShadow: var(--#{$notification-drawer}__list-item--list-item--m-read--BoxShadow);
162
- --#{$notification-drawer}__list-item--before--Top: var(--#{$notification-drawer}__list-item--list-item--m-read--before--Top);
163
- }
164
-
165
- &::before {
166
- position: absolute;
167
- inset-block-start: var(--#{$notification-drawer}__list-item--before--Top);
168
- inset-block-end: var(--#{$notification-drawer}__list-item--before--Bottom);
169
- width: var(--#{$notification-drawer}__list-item--before--Width);
170
- content: "";
171
- background-color: var(--#{$notification-drawer}__list-item--before--BackgroundColor);
172
- }
173
+ border: var(--#{$notification-drawer}__list-item--BorderWidth) solid var(--#{$notification-drawer}__list-item--BorderColor);
174
+ border-radius: var(--#{$notification-drawer}__list-item--BorderRadius);
173
175
 
174
176
  &.pf-m-info {
175
- --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-info__list-item--before--BackgroundColor);
177
+ --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-info__list-item--BorderColor);
176
178
  --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-info__list-item-header-icon--Color);
177
179
  }
178
180
 
179
181
  &.pf-m-warning {
180
- --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-warning__list-item--before--BackgroundColor);
182
+ --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-warning__list-item--BorderColor);
181
183
  --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-warning__list-item-header-icon--Color);
182
184
  }
183
185
 
184
186
  &.pf-m-danger {
185
- --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-danger__list-item--before--BackgroundColor);
187
+ --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-danger__list-item--BorderColor);
186
188
  --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-danger__list-item-header-icon--Color);
187
189
  }
188
190
 
189
191
  &.pf-m-success {
190
- --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-success__list-item--before--BackgroundColor);
192
+ --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-success__list-item--BorderColor);
191
193
  --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-success__list-item-header-icon--Color);
192
194
  }
193
195
 
194
196
  &.pf-m-custom {
195
- --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-custom__list-item--before--BackgroundColor);
197
+ --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-custom__list-item--BorderColor);
196
198
  --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-custom__list-item-header-icon--Color);
197
199
  }
198
200
 
199
201
  &.pf-m-read {
200
- --#{$notification-drawer}__list-item--BorderBottomColor: var(--#{$notification-drawer}__list-item--m-read--BorderBottomColor);
202
+ --#{$notification-drawer}__list-item--BorderWidth: var(--#{$notification-drawer}__list-item--m-read--BorderWidth);
201
203
  --#{$notification-drawer}__list-item--BackgroundColor: var(--#{$notification-drawer}__list-item--m-read--BackgroundColor);
202
- --#{$notification-drawer}__list-item--before--Top: var(--#{$notification-drawer}__list-item--m-read--before--Top);
203
- --#{$notification-drawer}__list-item--before--Bottom: var(--#{$notification-drawer}__list-item--m-read--before--Bottom);
204
- --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-read--before--BackgroundColor);
205
- --#{$notification-drawer}__list-item-header-title--FontWeight: var(--#{$notification-drawer}__list-item--m-read__list-item-header-title--FontWeight);
204
+ --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-read--BorderColor);
206
205
 
207
206
  position: relative;
208
207
  }
@@ -210,9 +209,9 @@
210
209
  &.pf-m-hoverable {
211
210
  cursor: pointer;
212
211
 
213
- &:hover {
214
- z-index: var(--#{$notification-drawer}__list-item--m-hoverable--hover--ZIndex);
215
- box-shadow: var(--#{$notification-drawer}__list-item--m-hoverable--hover--BoxShadow);
212
+ &:hover,
213
+ &:focus {
214
+ background-color: var(--#{$notification-drawer}__list-item--m-hoverable--hover--BackgroundColor);
216
215
  }
217
216
  }
218
217
  }
@@ -231,7 +230,10 @@
231
230
  }
232
231
 
233
232
  .#{$notification-drawer}__list-item-header-title {
233
+ font-family: var(--#{$notification-drawer}__list-item-header-title--FontFamily);
234
+ font-size: var(--#{$notification-drawer}__list-item-header-title--FontSize);
234
235
  font-weight: var(--#{$notification-drawer}__list-item-header-title--FontWeight);
236
+ line-height: var(--#{$notification-drawer}__list-item-header-title--LineHeight);
235
237
  word-break: break-word;
236
238
 
237
239
  &.pf-m-truncate {
@@ -264,17 +266,11 @@
264
266
  }
265
267
 
266
268
  .#{$notification-drawer}__group {
269
+ border-block-end: var(--#{$notification-drawer}__group--BorderBottomWidth) solid var(--#{$notification-drawer}__group--m-expanded--group--BorderBottomColor);
270
+
267
271
  &.pf-m-expanded {
268
272
  min-height: var(--#{$notification-drawer}__group--m-expanded--MinHeight);
269
-
270
- + .#{$notification-drawer}__group {
271
- border-block-start: var(--#{$notification-drawer}__group--m-expanded--group--BorderTopWidth) solid var(--#{$notification-drawer}__group--m-expanded--group--BorderTopColor);
272
- }
273
- }
274
-
275
- .#{$notification-drawer}__list-item:last-child {
276
- --#{$notification-drawer}__list-item--BorderBottomWidth: 0;
277
- --#{$notification-drawer}__list-item--before--Bottom: 0;
273
+ padding-block-end: var(--#{$notification-drawer}__group--m-expanded--PaddingBlockEnd);
278
274
  }
279
275
  }
280
276
 
@@ -287,8 +283,7 @@
287
283
  padding-inline-start: var(--#{$notification-drawer}__group-toggle--PaddingLeft);
288
284
  padding-inline-end: var(--#{$notification-drawer}__group-toggle--PaddingRight);
289
285
  background-color: var(--#{$notification-drawer}__group-toggle--BackgroundColor);
290
- border: 0 solid var(--#{$notification-drawer}__group-toggle--BorderColor);
291
- border-block-end-width: var(--#{$notification-drawer}__group-toggle--BorderBottomWidth);
286
+ border: none;
292
287
  outline-offset: var(--#{$notification-drawer}__group-toggle--OutlineOffset);
293
288
  }
294
289
 
@@ -297,6 +292,7 @@
297
292
 
298
293
  flex: 1;
299
294
  margin-inline-end: var(--#{$notification-drawer}__group-toggle-title--MarginRight);
295
+ font-size: var(--#{$notification-drawer}__group-toggle-title--FontSize);
300
296
  text-align: start;
301
297
  word-break: break-word;
302
298
  }
@@ -318,9 +314,3 @@
318
314
  }
319
315
  }
320
316
 
321
- // stylelint-disable no-invalid-position-at-import-rule
322
- @import "themes/dark/notification-drawer";
323
-
324
- @include pf-v5-theme-dark {
325
- @include pf-v5-theme-dark-notification-drawer;
326
- }
package/components/Radio/radio.css CHANGED
@@ -1,21 +1,26 @@
1
+ :root,
1
2
  .pf-v5-c-radio {
2
- --pf-v5-c-radio--GridGap: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm);
3
- --pf-v5-c-radio__label--disabled--Color: var(--pf-v5-global--disabled-color--100);
4
- --pf-v5-c-radio__label--Color: var(--pf-v5-global--Color--100);
5
- --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
6
- --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
7
- --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--md);
3
+ --pf-v5-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
5
+ --pf-v5-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
6
+ --pf-v5-c-radio__label--Color: var(--pf-t--global--text--color--regular);
7
+ --pf-v5-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body);
8
+ --pf-v5-c-radio__label--FontSize: var(--pf-t--global--font--size--body--default);
9
+ --pf-v5-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body);
8
10
  --pf-v5-c-radio__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%);
9
- --pf-v5-c-radio__input--TranslateY--moz: var(--pf-v5-c-radio__input--TranslateY);
10
11
  --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
11
12
  --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
12
- --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
13
- --pf-v5-c-radio__description--Color: var(--pf-v5-global--Color--200);
14
- --pf-v5-c-radio__body--MarginTop: var(--pf-v5-global--spacer--sm);
13
+ --pf-v5-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm);
14
+ --pf-v5-c-radio__description--Color: var(--pf-t--global--text--color--subtle);
15
+ --pf-v5-c-radio__body--MarginTop: var(--pf-t--global--spacer--sm);
16
+ }
17
+
18
+ .pf-v5-c-radio {
15
19
  display: grid;
16
20
  grid-template-columns: auto 1fr;
17
21
  grid-gap: var(--pf-v5-c-radio--GridGap);
18
22
  align-items: baseline;
23
+ accent-color: var(--pf-v5-c-radio--AccentColor);
19
24
  }
20
25
  .pf-v5-c-radio.pf-m-standalone {
21
26
  --pf-v5-c-radio--GridGap: 0;
@@ -25,7 +30,6 @@
25
30
 
26
31
  .pf-v5-c-radio__input {
27
32
  align-self: start;
28
- -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
29
33
  transform: translateY(var(--pf-v5-c-radio__input--TranslateY));
30
34
  }
31
35
  .pf-v5-c-radio__input:first-child {
package/components/Radio/radio.scss CHANGED
@@ -1,24 +1,28 @@
1
1
  // @debug $radio; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$radio} {
4
- --#{$radio}--GridGap: var(--#{$pf-global}--spacer--xs) var(--#{$pf-global}--spacer--sm);
5
- --#{$radio}__label--disabled--Color: var(--#{$pf-global}--disabled-color--100);
6
- --#{$radio}__label--Color: var(--#{$pf-global}--Color--100);
7
- --#{$radio}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
8
- --#{$radio}__label--FontSize: var(--#{$pf-global}--FontSize--md);
9
- --#{$radio}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
10
- --#{$radio}__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
11
- --#{$radio}__input--TranslateY--moz: var(--#{$radio}__input--TranslateY); // remove at breaking change
5
+ --#{$radio}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
6
+ --#{$radio}--AccentColor: var(--pf-t--global--icon--color--brand--default);
7
+ --#{$radio}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
8
+ --#{$radio}__label--Color: var(--pf-t--global--text--color--regular);
9
+ --#{$radio}__label--FontWeight: var(--pf-t--global--font--weight--body);
10
+ --#{$radio}__label--FontSize: var(--pf-t--global--font--size--body--default);
11
+ --#{$radio}__label--LineHeight: var(--pf-t--global--font--line-height--body);
12
+ --#{$radio}__input--TranslateY: calc((var(--#{$radio}__label--LineHeight) * var(--#{$radio}__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
12
13
  --#{$radio}__input--first-child--MarginLeft: #{pf-size-prem(1px)};
13
14
  --#{$radio}__input--last-child--MarginRight: #{pf-size-prem(1px)};
14
- --#{$radio}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
15
- --#{$radio}__description--Color: var(--#{$pf-global}--Color--200);
16
- --#{$radio}__body--MarginTop: var(--#{$pf-global}--spacer--sm);
15
+ --#{$radio}__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
+ --#{$radio}__description--Color: var(--pf-t--global--text--color--subtle);
17
+ --#{$radio}__body--MarginTop: var(--pf-t--global--spacer--sm);
18
+ }
17
19
 
20
+ .#{$radio} {
18
21
  display: grid;
19
22
  grid-template-columns: auto 1fr;
20
23
  grid-gap: var(--#{$radio}--GridGap);
21
24
  align-items: baseline;
25
+ accent-color: var(--#{$radio}--AccentColor);
22
26
 
23
27
  &.pf-m-standalone {
24
28
  --#{$radio}--GridGap: 0;
@@ -31,10 +35,6 @@
31
35
  .#{$radio}__input {
32
36
  align-self: start;
33
37
 
34
- // stylelint-disable property-no-vendor-prefix
35
- -moz-transform: translateY(var(--#{$radio}__input--TranslateY--moz)); // remove at breaking change - no longer needed
36
- // stylelint-enable
37
-
38
38
  // find height of single label, divide by two, offset by 50% of own height
39
39
  transform: translateY(var(--#{$radio}__input--TranslateY));
40
40
 
package/components/SimpleList/simple-list.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
6
6
  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7
7
  --pf-v5-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
8
- --pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body);
8
+ --pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body--default);
9
9
  --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
10
10
  --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
11
11
  --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
package/components/SimpleList/simple-list.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  --#{$simple-list}__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
9
9
  --#{$simple-list}__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10
10
  --#{$simple-list}__item-link--Color: var(--pf-t--global--text--color--subtle);
11
- --#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body);
11
+ --#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body--default);
12
12
  --#{$simple-list}__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
13
13
  --#{$simple-list}__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
14
14
  --#{$simple-list}__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
package/docs/components/Form/examples/Form.md CHANGED
@@ -18,7 +18,7 @@ cssPrefix: pf-v5-c-form
18
18
  role="button"
19
19
  type="button"
20
20
  tabindex="0"
21
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
21
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
22
22
  </div>
23
23
  <div class="pf-v5-c-form__group-control">
24
24
  <span class="pf-v5-c-form-control pf-m-required">
@@ -63,7 +63,7 @@ cssPrefix: pf-v5-c-form
63
63
  role="button"
64
64
  type="button"
65
65
  tabindex="0"
66
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
66
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
67
67
  </div>
68
68
  <div class="pf-v5-c-form__group-control">
69
69
  <span class="pf-v5-c-form-control">
@@ -92,7 +92,7 @@ cssPrefix: pf-v5-c-form
92
92
  role="button"
93
93
  type="button"
94
94
  tabindex="0"
95
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
95
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
96
96
  </div>
97
97
  <div class="pf-v5-c-form__group-control pf-m-stack">
98
98
  <div class="pf-v5-c-check">
@@ -143,7 +143,7 @@ cssPrefix: pf-v5-c-form
143
143
  role="button"
144
144
  type="button"
145
145
  tabindex="0"
146
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
146
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
147
147
  </div>
148
148
  <div class="pf-v5-c-form__group-control">
149
149
  <span class="pf-v5-c-form-control pf-m-required">
@@ -277,6 +277,9 @@ cssPrefix: pf-v5-c-form
277
277
  class="pf-v5-c-helper-text__item"
278
278
  id="form-help-text-name-helper"
279
279
  >
280
+ <span class="pf-v5-c-helper-text__item-icon">
281
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
282
+ </span>
280
283
  <span class="pf-v5-c-helper-text__item-text">This is helper text.</span>
281
284
  </div>
282
285
  </div>
@@ -308,6 +311,9 @@ cssPrefix: pf-v5-c-form
308
311
  class="pf-v5-c-helper-text__item pf-m-warning"
309
312
  id="form-help-text-email-helper"
310
313
  >
314
+ <span class="pf-v5-c-helper-text__item-icon">
315
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
316
+ </span>
311
317
  <span
312
318
  class="pf-v5-c-helper-text__item-text"
313
319
  >This is helper text for a warning input.</span>
@@ -342,6 +348,9 @@ cssPrefix: pf-v5-c-form
342
348
  class="pf-v5-c-helper-text__item pf-m-error"
343
349
  id="-address-helper"
344
350
  >
351
+ <span class="pf-v5-c-helper-text__item-icon">
352
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
353
+ </span>
345
354
  <span
346
355
  class="pf-v5-c-helper-text__item-text"
347
356
  >This is helper text for an invalid input.</span>
@@ -375,6 +384,9 @@ cssPrefix: pf-v5-c-form
375
384
  class="pf-v5-c-helper-text__item pf-m-success"
376
385
  id="form-help-text-comment-helper"
377
386
  >
387
+ <span class="pf-v5-c-helper-text__item-icon">
388
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
389
+ </span>
378
390
  <span
379
391
  class="pf-v5-c-helper-text__item-text"
380
392
  >This is helper text for success input.</span>
@@ -436,7 +448,7 @@ cssPrefix: pf-v5-c-form
436
448
  role="button"
437
449
  type="button"
438
450
  tabindex="0"
439
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
451
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
440
452
  </div>
441
453
  <div class="pf-v5-c-form__group-label-info">info</div>
442
454
  </div>
@@ -507,7 +519,7 @@ cssPrefix: pf-v5-c-form
507
519
  role="button"
508
520
  type="button"
509
521
  tabindex="0"
510
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
522
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
511
523
  </div>
512
524
  <div class="pf-v5-c-form__group-control">
513
525
  <span class="pf-v5-c-form-control pf-m-required">
@@ -532,7 +544,7 @@ cssPrefix: pf-v5-c-form
532
544
  role="button"
533
545
  type="button"
534
546
  tabindex="0"
535
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
547
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
536
548
  </div>
537
549
  <div class="pf-v5-c-form__group-control">
538
550
  <span class="pf-v5-c-form-control pf-m-required">
@@ -640,7 +652,7 @@ cssPrefix: pf-v5-c-form
640
652
  role="button"
641
653
  type="button"
642
654
  tabindex="0"
643
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
655
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
644
656
  </div>
645
657
  <div class="pf-v5-c-form__group-control">
646
658
  <span class="pf-v5-c-form-control pf-m-required">
@@ -665,7 +677,7 @@ cssPrefix: pf-v5-c-form
665
677
  role="button"
666
678
  type="button"
667
679
  tabindex="0"
668
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
680
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
669
681
  </div>
670
682
  <div class="pf-v5-c-form__group-control">
671
683
  <span class="pf-v5-c-form-control pf-m-required">
@@ -709,7 +721,7 @@ cssPrefix: pf-v5-c-form
709
721
  role="button"
710
722
  type="button"
711
723
  tabindex="0"
712
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
724
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
713
725
  </div>
714
726
  <div class="pf-v5-c-form__group-control">
715
727
  <span class="pf-v5-c-form-control pf-m-required">
@@ -737,7 +749,7 @@ cssPrefix: pf-v5-c-form
737
749
  role="button"
738
750
  type="button"
739
751
  tabindex="0"
740
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
752
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
741
753
  </div>
742
754
  <div class="pf-v5-c-form__group-control">
743
755
  <span class="pf-v5-c-form-control pf-m-required">