@patternfly/patternfly 6.0.0-alpha.44 → 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 (31) 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/Panel/panel.css +27 -23
  10. package/components/Panel/panel.scss +29 -26
  11. package/components/Radio/radio.css +15 -11
  12. package/components/Radio/radio.scss +15 -15
  13. package/components/SimpleList/simple-list.css +1 -1
  14. package/components/SimpleList/simple-list.scss +1 -1
  15. package/docs/components/Form/examples/Form.md +23 -11
  16. package/docs/components/Panel/examples/Panel.md +12 -0
  17. package/docs/demos/Alert/examples/Alert.md +24 -0
  18. package/docs/demos/Form/examples/BasicForms.md +31 -10
  19. package/docs/demos/Modal/examples/Modal.md +3 -3
  20. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  21. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  22. package/package.json +1 -1
  23. package/patternfly-no-globals.css +319 -369
  24. package/patternfly-theme-dark-unversioned.css +319 -369
  25. package/patternfly.css +319 -369
  26. package/patternfly.min.css +1 -1
  27. package/patternfly.min.css.map +1 -1
  28. package/components/Form/themes/dark/form.scss +0 -7
  29. package/components/FormControl/themes/dark/form-control.scss +0 -24
  30. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  31. package/components/Panel/themes/dark/panel.scss +0 -7
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/Panel/panel.css CHANGED
@@ -1,34 +1,39 @@
1
+ :root,
1
2
  .pf-v5-c-panel {
2
3
  --pf-v5-c-panel--Width: auto;
3
4
  --pf-v5-c-panel--MinWidth: auto;
4
5
  --pf-v5-c-panel--MaxWidth: none;
5
6
  --pf-v5-c-panel--ZIndex: auto;
6
- --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7
+ --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
8
  --pf-v5-c-panel--BoxShadow: none;
8
9
  --pf-v5-c-panel--before--BorderWidth: 0;
9
- --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
10
- --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11
- --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
12
- --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
13
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
14
- --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
15
- --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
16
- --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
17
- --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
10
+ --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
11
+ --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12
+ --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
13
+ --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
14
+ --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
15
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
16
+ --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
17
+ --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
18
+ --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
19
+ --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
18
20
  --pf-v5-c-panel__main--MaxHeight: none;
19
21
  --pf-v5-c-panel__main--Overflow: visible;
20
- --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
21
- --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
22
- --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
23
- --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
24
- --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
25
- --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
26
- --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
27
- --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
22
+ --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
23
+ --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
24
+ --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
25
+ --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
26
+ --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
27
+ --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
28
+ --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
29
+ --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
28
30
  --pf-v5-c-panel__footer--BoxShadow: none;
29
31
  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
30
32
  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
31
- --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
33
+ --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
34
+ }
35
+
36
+ .pf-v5-c-panel {
32
37
  position: relative;
33
38
  z-index: var(--pf-v5-c-panel--ZIndex);
34
39
  width: var(--pf-v5-c-panel--Width);
@@ -47,6 +52,9 @@
47
52
  .pf-v5-c-panel.pf-m-bordered {
48
53
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
49
54
  }
55
+ .pf-v5-c-panel.pf-m-secondary {
56
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
57
+ }
50
58
  .pf-v5-c-panel.pf-m-raised {
51
59
  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
52
60
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -83,8 +91,4 @@
83
91
  padding-inline-start: var(--pf-v5-c-panel__footer--PaddingLeft);
84
92
  padding-inline-end: var(--pf-v5-c-panel__footer--PaddingRight);
85
93
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
86
- }
87
-
88
- :where(.pf-v5-theme-dark) .pf-v5-c-panel {
89
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
90
94
  }
package/components/Panel/panel.scss CHANGED
@@ -1,53 +1,59 @@
1
1
  // @debug $panel; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$panel} {
4
5
  --#{$panel}--Width: auto;
5
6
  --#{$panel}--MinWidth: auto;
6
7
  --#{$panel}--MaxWidth: none;
7
8
  --#{$panel}--ZIndex: auto;
8
- --#{$panel}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
9
+ --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9
10
  --#{$panel}--BoxShadow: none;
10
11
 
11
12
  // border
12
13
  --#{$panel}--before--BorderWidth: 0;
13
- --#{$panel}--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
14
+ --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--default);
15
+
16
+ // secondary modifier
17
+ --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14
18
 
15
19
  // bordered
16
- --#{$panel}--m-bordered--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
20
+ --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
17
21
 
18
22
  // raised
19
- --#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
20
- --#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm);
21
- --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
23
+ --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
24
+ --#{$panel}--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
25
+ --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22
26
 
23
27
  // header
24
- --#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md);
25
- --#{$panel}__header--PaddingRight: var(--#{$pf-global}--spacer--md);
26
- --#{$panel}__header--PaddingBottom: var(--#{$pf-global}--spacer--md);
27
- --#{$panel}__header--PaddingLeft: var(--#{$pf-global}--spacer--md);
28
+ --#{$panel}__header--PaddingTop: var(--pf-t--global--spacer--md);
29
+ --#{$panel}__header--PaddingRight: var(--pf-t--global--spacer--md);
30
+ --#{$panel}__header--PaddingBottom: var(--pf-t--global--spacer--md);
31
+ --#{$panel}__header--PaddingLeft: var(--pf-t--global--spacer--md);
28
32
 
29
33
  // main
30
34
  --#{$panel}__main--MaxHeight: none;
31
35
  --#{$panel}__main--Overflow: visible;
32
36
 
33
37
  // body
34
- --#{$panel}__main-body--PaddingTop: var(--#{$pf-global}--spacer--md);
35
- --#{$panel}__main-body--PaddingRight: var(--#{$pf-global}--spacer--md);
36
- --#{$panel}__main-body--PaddingBottom: var(--#{$pf-global}--spacer--md);
37
- --#{$panel}__main-body--PaddingLeft: var(--#{$pf-global}--spacer--md);
38
+ --#{$panel}__main-body--PaddingTop: var(--pf-t--global--spacer--md);
39
+ --#{$panel}__main-body--PaddingRight: var(--pf-t--global--spacer--md);
40
+ --#{$panel}__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
41
+ --#{$panel}__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
38
42
 
39
43
  // footer
40
- --#{$panel}__footer--PaddingTop: var(--#{$pf-global}--spacer--md);
41
- --#{$panel}__footer--PaddingRight: var(--#{$pf-global}--spacer--md);
42
- --#{$panel}__footer--PaddingBottom: var(--#{$pf-global}--spacer--md);
43
- --#{$panel}__footer--PaddingLeft: var(--#{$pf-global}--spacer--md);
44
+ --#{$panel}__footer--PaddingTop: var(--pf-t--global--spacer--md);
45
+ --#{$panel}__footer--PaddingRight: var(--pf-t--global--spacer--md);
46
+ --#{$panel}__footer--PaddingBottom: var(--pf-t--global--spacer--md);
47
+ --#{$panel}__footer--PaddingLeft: var(--pf-t--global--spacer--md);
44
48
  --#{$panel}__footer--BoxShadow: none;
45
49
 
46
50
  // scrollable
47
51
  --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
48
52
  --#{$panel}--m-scrollable__main--Overflow: auto;
49
- --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} #{rgba($pf-v5-color-black-1000, .16)}; // insets the shadow so it doesn't show on left/right sides
53
+ --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} rgba(0 0 0 / 16%); // insets the shadow so it doesn't show on left/right sides
54
+ }
50
55
 
56
+ .#{$panel} {
51
57
  position: relative;
52
58
  z-index: var(--#{$panel}--ZIndex);
53
59
  width: var(--#{$panel}--Width);
@@ -68,6 +74,10 @@
68
74
  --#{$panel}--before--BorderWidth: var(--#{$panel}--m-bordered--before--BorderWidth);
69
75
  }
70
76
 
77
+ &.pf-m-secondary {
78
+ --#{$panel}--BackgroundColor: var(--#{$panel}--m-secondary--BackgroundColor);
79
+ }
80
+
71
81
  &.pf-m-raised {
72
82
  --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
73
83
  --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
@@ -107,10 +117,3 @@
107
117
  padding-inline-end: var(--#{$panel}__footer--PaddingRight);
108
118
  box-shadow: var(--#{$panel}__footer--BoxShadow);
109
119
  }
110
-
111
- // stylelint-disable no-invalid-position-at-import-rule
112
- @import "themes/dark/panel";
113
-
114
- @include pf-v5-theme-dark {
115
- @include pf-v5-theme-dark-panel;
116
- }
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 {