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

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 (33) hide show
  1. package/components/Button/button.css +3 -1
  2. package/components/Button/button.scss +3 -1
  3. package/components/Check/check.css +17 -16
  4. package/components/Check/check.scss +17 -20
  5. package/components/Form/form.css +68 -87
  6. package/components/Form/form.scss +67 -98
  7. package/components/FormControl/form-control.css +86 -111
  8. package/components/FormControl/form-control.scss +88 -92
  9. package/components/NotificationDrawer/notification-drawer.css +104 -115
  10. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  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/components/Switch/switch.css +41 -37
  16. package/components/Switch/switch.scss +47 -42
  17. package/docs/components/Button/examples/Button.md +29 -2
  18. package/docs/components/Form/examples/Form.md +23 -11
  19. package/docs/demos/Alert/examples/Alert.md +24 -0
  20. package/docs/demos/Form/examples/BasicForms.md +31 -10
  21. package/docs/demos/Modal/examples/Modal.md +3 -3
  22. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  23. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  24. package/package.json +1 -1
  25. package/patternfly-no-globals.css +336 -384
  26. package/patternfly-theme-dark-unversioned.css +336 -384
  27. package/patternfly.css +336 -384
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
  30. package/components/Form/themes/dark/form.scss +0 -7
  31. package/components/FormControl/themes/dark/form-control.scss +0 -24
  32. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  33. package/components/Switch/themes/dark/switch.scss +0 -11
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/components/Switch/switch.css CHANGED
@@ -1,37 +1,41 @@
1
+ :root,
1
2
  .pf-v5-c-switch {
2
- --pf-v5-c-switch--FontSize: var(--pf-v5-global--FontSize--md);
3
- --pf-v5-c-switch__label--PaddingLeft: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-switch--ColumnGap: var(--pf-v5-c-switch__label--PaddingLeft);
3
+ --pf-v5-c-switch--FontSize: var(--pf-t--global--font--size--sm);
4
+ --pf-v5-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
5
5
  --pf-v5-c-switch__toggle-icon--FontSize: calc(var(--pf-v5-c-switch--FontSize) * .625);
6
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
6
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7
7
  --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
8
8
  --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
9
- --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
10
- --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
9
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
10
+ --pf-v5-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
11
11
  --pf-v5-c-switch--Height: auto;
12
- --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
12
+ --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
13
13
  --pf-v5-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset));
14
- --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--dark-100);
15
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--disabled-color--100);
16
- --pf-v5-c-switch__input--disabled__label--Color: var(--pf-v5-global--disabled-color--100);
17
- --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18
- --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--palette--black-150);
19
- --pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-v5-global--BorderWidth--md);
20
- --pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-v5-global--spacer--sm);
21
- --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-v5-global--primary-color--100);
14
+ --pf-v5-c-switch__input--checked__toggle--BorderWidth: 0;
15
+ --pf-v5-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
16
+ --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
17
+ --pf-v5-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
18
+ --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
19
+ --pf-v5-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
20
+ --pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
21
+ --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
22
+ --pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
23
+ --pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
24
+ --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
22
25
  --pf-v5-c-switch__toggle--Height: calc(var(--pf-v5-c-switch--FontSize) * var(--pf-v5-c-switch--LineHeight));
23
- --pf-v5-c-switch__toggle--BackgroundColor: var(--pf-v5-global--palette--black-500);
24
- --pf-v5-c-switch__toggle--BorderRadius: var(--pf-v5-c-switch__toggle--Height);
26
+ --pf-v5-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
27
+ --pf-v5-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
28
+ --pf-v5-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
29
+ --pf-v5-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
25
30
  --pf-v5-c-switch__toggle--before--Width: calc(var(--pf-v5-c-switch--FontSize) - var(--pf-v5-c-switch__toggle-icon--Offset));
26
31
  --pf-v5-c-switch__toggle--before--Height: var(--pf-v5-c-switch__toggle--before--Width);
27
- --pf-v5-c-switch__toggle--before--Top: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
28
- --pf-v5-c-switch__toggle--before--Left: var(--pf-v5-c-switch__toggle--before--Top);
29
- --pf-v5-c-switch__toggle--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
30
- --pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
31
- --pf-v5-c-switch__toggle--before--BoxShadow: var(--pf-v5-global--BoxShadow--md);
32
+ --pf-v5-c-switch__toggle--before--Left: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
33
+ --pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
32
34
  --pf-v5-c-switch__toggle--before--Transition: transform .25s ease 0s;
33
35
  --pf-v5-c-switch__toggle--Width: calc(var(--pf-v5-c-switch__toggle--Height) + var(--pf-v5-c-switch__toggle-icon--Offset) + var(--pf-v5-c-switch__toggle--before--Width));
34
- --pf-v5-c-switch__label--Color: var(--pf-v5-global--Color--dark-100);
36
+ }
37
+
38
+ .pf-v5-c-switch {
35
39
  position: relative;
36
40
  display: inline-grid;
37
41
  grid-template-columns: auto;
@@ -64,13 +68,15 @@
64
68
  color: var(--pf-v5-c-switch__input--checked__label--Color);
65
69
  }
66
70
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
71
+ --pf-v5-c-switch__toggle--BorderWidth: var(--pf-v5-c-switch__input--checked__toggle--BorderWidth);
67
72
  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
68
73
  }
69
74
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
70
- transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
75
+ transform: translate(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX), -50%);
76
+ background-color: var(--pf-v5-c-switch__input--checked__toggle--before--BackgroundColor);
71
77
  }
72
78
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
73
- transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
79
+ transform: translate(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), -50%);
74
80
  }
75
81
 
76
82
  .pf-v5-c-switch__input:checked ~ .pf-m-off {
@@ -111,16 +117,23 @@
111
117
  }
112
118
  .pf-v5-c-switch__toggle::before {
113
119
  position: absolute;
114
- inset-block-start: var(--pf-v5-c-switch__toggle--before--Top);
120
+ inset-block-start: 50%;
115
121
  inset-inline-start: var(--pf-v5-c-switch__toggle--before--Left);
116
122
  display: block;
117
123
  width: var(--pf-v5-c-switch__toggle--before--Width);
118
124
  height: var(--pf-v5-c-switch__toggle--before--Height);
119
125
  content: "";
120
- background-color: var(--pf-v5-c-switch__toggle--before--BackgroundColor);
126
+ background-color: var(--pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor);
121
127
  border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius);
122
- box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow);
123
128
  transition: var(--pf-v5-c-switch__toggle--before--Transition);
129
+ transform: translateY(-50%);
130
+ }
131
+ .pf-v5-c-switch__toggle::after {
132
+ position: absolute;
133
+ inset: 0;
134
+ content: "";
135
+ border: var(--pf-v5-c-switch__toggle--BorderWidth) solid var(--pf-v5-c-switch__toggle--BorderColor);
136
+ border-radius: var(--pf-v5-c-switch__toggle--BorderRadius);
124
137
  }
125
138
 
126
139
  .pf-v5-c-switch__toggle-icon {
@@ -137,14 +150,5 @@
137
150
  .pf-v5-c-switch__label {
138
151
  display: inline-block;
139
152
  grid-column: 2;
140
- color: var(--pf-v5-c-switch__label--Color);
141
153
  vertical-align: top;
142
- }
143
-
144
- :where(.pf-v5-theme-dark) .pf-v5-c-switch {
145
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
146
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
147
- --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
148
- --pf-v5-c-switch__toggle--before--BoxShadow: none;
149
- --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
150
154
  }