@patternfly/patternfly 4.185.1 → 4.186.1

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 (13) hide show
  1. package/base/_globals.scss +5 -0
  2. package/base/patternfly-globals.css +5 -0
  3. package/components/Form/form.css +5 -3
  4. package/components/Form/form.scss +5 -3
  5. package/components/Switch/switch.css +3 -3
  6. package/components/Switch/switch.scss +3 -3
  7. package/docs/components/Switch/examples/Switch.md +60 -11
  8. package/package.json +1 -1
  9. package/patternfly-base.css +5 -0
  10. package/patternfly-no-reset.css +8 -6
  11. package/patternfly.css +13 -6
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/base/_globals.scss CHANGED
@@ -87,6 +87,11 @@
87
87
  text-align: left;
88
88
  }
89
89
 
90
+ code,
91
+ pre {
92
+ font-family: var(--pf-global--FontFamily--monospace);
93
+ }
94
+
90
95
  // Patternfly base styles
91
96
 
92
97
  *,
package/base/patternfly-globals.css CHANGED
@@ -81,6 +81,11 @@ th {
81
81
  text-align: left;
82
82
  }
83
83
 
84
+ code,
85
+ pre {
86
+ font-family: var(--pf-global--FontFamily--monospace);
87
+ }
88
+
84
89
  *,
85
90
  *::before,
86
91
  *::after {
package/components/Form/form.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
5
5
  --pf-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-global--spacer--md);
6
6
  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
7
- --pf-c-form--m-limit-width--MaxWidth: 31.25rem;
7
+ --pf-c-form--m-limit-width--MaxWidth: 55rem;
8
8
  --pf-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)) + (2 * var(--pf-global--BorderWidth--sm))) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)) - ((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) + var(--pf-global--BorderWidth--sm));
9
9
  --pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--sm);
10
10
  --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
@@ -12,6 +12,8 @@
12
12
  --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
13
13
  --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
14
14
  --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
15
+ --pf-c-form__label--hover--Cursor: pointer;
16
+ --pf-c-form__label--m-disabled--hover--Cursor: not-allowed;
15
17
  --pf-c-form__label-text--FontWeight: var(--pf-global--FontWeight--bold);
16
18
  --pf-c-form__label-required--MarginLeft: var(--pf-global--spacer--xs);
17
19
  --pf-c-form__label-required--FontSize: var(--pf-global--FontSize--sm);
@@ -289,13 +291,13 @@
289
291
  background-color: none;
290
292
  }
291
293
  .pf-c-form__label:not(.pf-m-disabled):hover {
292
- cursor: pointer;
294
+ cursor: var(--pf-c-form__label--hover--Cursor);
293
295
  }
294
296
  .pf-c-form__label.pf-m-disabled {
295
297
  color: var(--pf-c-form__label--m-disabled--Color);
296
298
  }
297
299
  .pf-c-form__label.pf-m-disabled:hover {
298
- cursor: not-allowed;
300
+ cursor: var(--pf-c-form__label--m-disabled--hover--Cursor);
299
301
  }
300
302
 
301
303
  .pf-c-form__label-text {
package/components/Form/form.scss CHANGED
@@ -33,7 +33,7 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
33
33
  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
34
34
 
35
35
  // limit width
36
- --pf-c-form--m-limit-width--MaxWidth: #{pf-size-prem(500px)};
36
+ --pf-c-form--m-limit-width--MaxWidth: #{pf-size-prem(880px)};
37
37
 
38
38
  // Group label
39
39
 
@@ -67,6 +67,8 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
67
67
  --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
68
68
  --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
69
69
  --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
70
+ --pf-c-form__label--hover--Cursor: pointer;
71
+ --pf-c-form__label--m-disabled--hover--Cursor: not-allowed;
70
72
 
71
73
  // Label text
72
74
  --pf-c-form__label-text--FontWeight: var(--pf-global--FontWeight--bold);
@@ -268,7 +270,7 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
268
270
  }
269
271
 
270
272
  &:not(.pf-m-disabled):hover {
271
- cursor: pointer;
273
+ cursor: var(--pf-c-form__label--hover--Cursor);
272
274
  }
273
275
 
274
276
  &.pf-m-disabled {
@@ -276,7 +278,7 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
276
278
  }
277
279
 
278
280
  &.pf-m-disabled:hover {
279
- cursor: not-allowed;
281
+ cursor: var(--pf-c-form__label--m-disabled--hover--Cursor);
280
282
  }
281
283
  }
282
284
 
package/components/Switch/switch.css CHANGED
@@ -13,13 +13,13 @@
13
13
  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
14
14
  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
15
15
  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
16
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
17
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
16
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
17
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
18
18
  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
19
19
  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
20
20
  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
21
21
  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
22
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
22
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
23
23
  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
24
24
  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
25
25
  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
package/components/Switch/switch.scss CHANGED
@@ -20,15 +20,15 @@
20
20
  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
21
21
  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
22
22
  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
23
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
24
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
23
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
24
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
25
25
  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
26
26
  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
27
27
  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
28
28
 
29
29
  // Switch toggle
30
30
  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
31
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
31
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
32
32
  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
33
33
  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
34
34
  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
package/docs/components/Switch/examples/Switch.md CHANGED
@@ -13,7 +13,6 @@ cssPrefix: pf-c-switch
13
13
  type="checkbox"
14
14
  id="switch-with-label-1"
15
15
  aria-labelledby="switch-with-label-1-on"
16
- name="switchExample1"
17
16
  checked
18
17
  />
19
18
 
@@ -40,9 +39,7 @@ cssPrefix: pf-c-switch
40
39
  type="checkbox"
41
40
  id="switch-with-label-2"
42
41
  aria-labelledby="switch-with-label-2-on"
43
- name="switchExample2"
44
42
  />
45
-
46
43
  <span class="pf-c-switch__toggle"></span>
47
44
 
48
45
  <span
@@ -69,7 +66,6 @@ cssPrefix: pf-c-switch
69
66
  type="checkbox"
70
67
  id="switch-reverse-1"
71
68
  aria-labelledby="switch-reverse-1-on"
72
- name="switchExample1"
73
69
  checked
74
70
  />
75
71
 
@@ -96,9 +92,7 @@ cssPrefix: pf-c-switch
96
92
  type="checkbox"
97
93
  id="switch-reverse-2"
98
94
  aria-labelledby="switch-reverse-2-on"
99
- name="switchExample2"
100
95
  />
101
-
102
96
  <span class="pf-c-switch__toggle"></span>
103
97
 
104
98
  <span
@@ -116,6 +110,66 @@ cssPrefix: pf-c-switch
116
110
 
117
111
  ```
118
112
 
113
+ ### Label and check
114
+
115
+ ```html
116
+ <label class="pf-c-switch" for="switch-label-check-1">
117
+ <input
118
+ class="pf-c-switch__input"
119
+ type="checkbox"
120
+ id="switch-label-check-1"
121
+ aria-labelledby="switch-label-check-1-on"
122
+ checked
123
+ />
124
+
125
+ <span class="pf-c-switch__toggle">
126
+ <span class="pf-c-switch__toggle-icon">
127
+ <i class="fas fa-check" aria-hidden="true"></i>
128
+ </span>
129
+ </span>
130
+ <span
131
+ class="pf-c-switch__label pf-m-on"
132
+ id="switch-label-check-1-on"
133
+ aria-hidden="true"
134
+ >Message when on</span>
135
+
136
+ <span
137
+ class="pf-c-switch__label pf-m-off"
138
+ id="switch-label-check-1-off"
139
+ aria-hidden="true"
140
+ >Message when off</span>
141
+ </label>
142
+
143
+ <br />
144
+ <br />
145
+ <label class="pf-c-switch" for="switch-label-check-2">
146
+ <input
147
+ class="pf-c-switch__input"
148
+ type="checkbox"
149
+ id="switch-label-check-2"
150
+ aria-labelledby="switch-label-check-2-off"
151
+ />
152
+
153
+ <span class="pf-c-switch__toggle">
154
+ <span class="pf-c-switch__toggle-icon">
155
+ <i class="fas fa-check" aria-hidden="true"></i>
156
+ </span>
157
+ </span>
158
+ <span
159
+ class="pf-c-switch__label pf-m-on"
160
+ id="switch-label-check-2-on"
161
+ aria-hidden="true"
162
+ >Message when on</span>
163
+
164
+ <span
165
+ class="pf-c-switch__label pf-m-off"
166
+ id="switch-label-check-2-off"
167
+ aria-hidden="true"
168
+ >Message when off</span>
169
+ </label>
170
+
171
+ ```
172
+
119
173
  ### Without label
120
174
 
121
175
  ```html
@@ -125,7 +179,6 @@ cssPrefix: pf-c-switch
125
179
  type="checkbox"
126
180
  id="switch-with-icon-1"
127
181
  aria-label="switch is off"
128
- name="switchExample3"
129
182
  checked
130
183
  />
131
184
 
@@ -144,9 +197,7 @@ cssPrefix: pf-c-switch
144
197
  type="checkbox"
145
198
  id="switch-with-icon-2"
146
199
  aria-label="switch is off"
147
- name="switchExample4"
148
200
  />
149
-
150
201
  <span class="pf-c-switch__toggle">
151
202
  <span class="pf-c-switch__toggle-icon">
152
203
  <i class="fas fa-check" aria-hidden="true"></i>
@@ -165,7 +216,6 @@ cssPrefix: pf-c-switch
165
216
  type="checkbox"
166
217
  id="switch-disabled-1"
167
218
  aria-labelledby="switch-disabled-1-on"
168
- name="switchExample5"
169
219
  disabled
170
220
  checked
171
221
  />
@@ -193,7 +243,6 @@ cssPrefix: pf-c-switch
193
243
  type="checkbox"
194
244
  id="switch-disabled-2"
195
245
  aria-labelledby="switch-disabled-2-on"
196
- name="switchExample6"
197
246
  disabled
198
247
  />
199
248
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.185.1",
4
+ "version": "4.186.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base.css CHANGED
@@ -642,6 +642,11 @@ th {
642
642
  text-align: left;
643
643
  }
644
644
 
645
+ code,
646
+ pre {
647
+ font-family: var(--pf-global--FontFamily--monospace);
648
+ }
649
+
645
650
  *,
646
651
  *::before,
647
652
  *::after {
package/patternfly-no-reset.css CHANGED
@@ -13453,7 +13453,7 @@ label.pf-c-check, .pf-c-check__label,
13453
13453
  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
13454
13454
  --pf-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-global--spacer--md);
13455
13455
  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
13456
- --pf-c-form--m-limit-width--MaxWidth: 31.25rem;
13456
+ --pf-c-form--m-limit-width--MaxWidth: 55rem;
13457
13457
  --pf-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)) + (2 * var(--pf-global--BorderWidth--sm))) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)) - ((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) + var(--pf-global--BorderWidth--sm));
13458
13458
  --pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--sm);
13459
13459
  --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
@@ -13461,6 +13461,8 @@ label.pf-c-check, .pf-c-check__label,
13461
13461
  --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
13462
13462
  --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
13463
13463
  --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
13464
+ --pf-c-form__label--hover--Cursor: pointer;
13465
+ --pf-c-form__label--m-disabled--hover--Cursor: not-allowed;
13464
13466
  --pf-c-form__label-text--FontWeight: var(--pf-global--FontWeight--bold);
13465
13467
  --pf-c-form__label-required--MarginLeft: var(--pf-global--spacer--xs);
13466
13468
  --pf-c-form__label-required--FontSize: var(--pf-global--FontSize--sm);
@@ -13738,13 +13740,13 @@ label.pf-c-check, .pf-c-check__label,
13738
13740
  background-color: none;
13739
13741
  }
13740
13742
  .pf-c-form__label:not(.pf-m-disabled):hover {
13741
- cursor: pointer;
13743
+ cursor: var(--pf-c-form__label--hover--Cursor);
13742
13744
  }
13743
13745
  .pf-c-form__label.pf-m-disabled {
13744
13746
  color: var(--pf-c-form__label--m-disabled--Color);
13745
13747
  }
13746
13748
  .pf-c-form__label.pf-m-disabled:hover {
13747
- cursor: not-allowed;
13749
+ cursor: var(--pf-c-form__label--m-disabled--hover--Cursor);
13748
13750
  }
13749
13751
 
13750
13752
  .pf-c-form__label-text {
@@ -22842,13 +22844,13 @@ svg.pf-c-spinner.pf-m-xl {
22842
22844
  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
22843
22845
  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
22844
22846
  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
22845
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
22846
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
22847
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
22848
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
22847
22849
  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
22848
22850
  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
22849
22851
  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
22850
22852
  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
22851
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
22853
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
22852
22854
  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
22853
22855
  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
22854
22856
  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
package/patternfly.css CHANGED
@@ -715,6 +715,11 @@ th {
715
715
  text-align: left;
716
716
  }
717
717
 
718
+ code,
719
+ pre {
720
+ font-family: var(--pf-global--FontFamily--monospace);
721
+ }
722
+
718
723
  *,
719
724
  *::before,
720
725
  *::after {
@@ -13575,7 +13580,7 @@ label.pf-c-check, .pf-c-check__label,
13575
13580
  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
13576
13581
  --pf-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-global--spacer--md);
13577
13582
  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
13578
- --pf-c-form--m-limit-width--MaxWidth: 31.25rem;
13583
+ --pf-c-form--m-limit-width--MaxWidth: 55rem;
13579
13584
  --pf-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)) + (2 * var(--pf-global--BorderWidth--sm))) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)) - ((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) + var(--pf-global--BorderWidth--sm));
13580
13585
  --pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--sm);
13581
13586
  --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
@@ -13583,6 +13588,8 @@ label.pf-c-check, .pf-c-check__label,
13583
13588
  --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
13584
13589
  --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
13585
13590
  --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
13591
+ --pf-c-form__label--hover--Cursor: pointer;
13592
+ --pf-c-form__label--m-disabled--hover--Cursor: not-allowed;
13586
13593
  --pf-c-form__label-text--FontWeight: var(--pf-global--FontWeight--bold);
13587
13594
  --pf-c-form__label-required--MarginLeft: var(--pf-global--spacer--xs);
13588
13595
  --pf-c-form__label-required--FontSize: var(--pf-global--FontSize--sm);
@@ -13860,13 +13867,13 @@ label.pf-c-check, .pf-c-check__label,
13860
13867
  background-color: none;
13861
13868
  }
13862
13869
  .pf-c-form__label:not(.pf-m-disabled):hover {
13863
- cursor: pointer;
13870
+ cursor: var(--pf-c-form__label--hover--Cursor);
13864
13871
  }
13865
13872
  .pf-c-form__label.pf-m-disabled {
13866
13873
  color: var(--pf-c-form__label--m-disabled--Color);
13867
13874
  }
13868
13875
  .pf-c-form__label.pf-m-disabled:hover {
13869
- cursor: not-allowed;
13876
+ cursor: var(--pf-c-form__label--m-disabled--hover--Cursor);
13870
13877
  }
13871
13878
 
13872
13879
  .pf-c-form__label-text {
@@ -22964,13 +22971,13 @@ svg.pf-c-spinner.pf-m-xl {
22964
22971
  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
22965
22972
  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
22966
22973
  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
22967
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
22968
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
22974
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
22975
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
22969
22976
  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
22970
22977
  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
22971
22978
  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
22972
22979
  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
22973
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
22980
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
22974
22981
  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
22975
22982
  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
22976
22983
  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);