Skip to content

Commit 50659a9

Browse files
authored
[switch] Remove dark-mode specific styling for switches (#7503)
1 parent 6b44480 commit 50659a9

File tree

1 file changed

+10
-30
lines changed

1 file changed

+10
-30
lines changed

packages/core/src/components/forms/_controls.scss

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -356,23 +356,11 @@ $control-indicator-spacing: $pt-grid-size !default;
356356
$dark-switch-text-color-disabled: $pt-dark-text-color-disabled !default;
357357
$dark-switch-checked-text-color: $white !default;
358358
$dark-switch-checked-text-color-disabled: $pt-dark-text-color-disabled !default;
359-
$dark-switch-background-color: rgba($black, 0.5) !default;
360-
$dark-switch-background-color-hover: rgba($black, 0.8) !default;
361-
$dark-switch-background-color-active: rgba($black, 0.9) !default;
362-
$dark-switch-background-color-disabled: rgba($gray3, 0.15) !default;
363-
$dark-switch-checked-background-color: $control-checked-background-color !default;
364-
$dark-switch-checked-background-color-hover: $control-checked-background-color-hover !default;
365-
$dark-switch-checked-background-color-active: $control-checked-background-color-active !default;
366-
$dark-switch-checked-background-color-disabled: rgba($blue3, 0.5) !default;
367359

368360
$switch-indicator-background-color: rgba($gray3, 0.3) !default;
369361
$switch-indicator-box-shadow: 0 0 0 $button-border-width rgba($black, 0.5) !default;
370362
$switch-indicator-background-color-disabled: rgba($white, 0.8) !default;
371363
$switch-checked-indicator-background-color-disabled: rgba($white, 0.5) !default;
372-
$dark-switch-indicator-background-color: $gray4 !default;
373-
$dark-switch-indicator-background-color-disabled: rgba($gray4, 0.5) !default;
374-
$dark-switch-checked-indicator-background-color: $white !default;
375-
$dark-switch-checked-indicator-background-color-disabled: rgba($white, 0.3) !default;
376364

377365
&.#{$ns}-switch {
378366
@mixin indicator-colors(
@@ -503,32 +491,24 @@ $control-indicator-spacing: $pt-grid-size !default;
503491
@include indicator-colors(
504492
"",
505493
$dark-switch-text-color,
506-
$dark-switch-background-color,
507-
$dark-switch-background-color-hover,
508-
$dark-switch-background-color-active,
494+
$switch-background-color,
495+
$switch-background-color-hover,
496+
$switch-background-color-active,
509497
$dark-switch-text-color-disabled,
510-
$dark-switch-background-color-disabled,
511-
$dark-switch-indicator-background-color-disabled
498+
$switch-background-color-disabled,
499+
$switch-indicator-background-color-disabled
512500
);
513501
@include indicator-colors(
514502
":checked",
515503
$dark-switch-checked-text-color,
516-
$dark-switch-checked-background-color,
517-
$dark-switch-checked-background-color-hover,
518-
$dark-switch-checked-background-color-active,
504+
$switch-checked-background-color,
505+
$switch-checked-background-color-hover,
506+
$switch-checked-background-color-active,
519507
$dark-switch-checked-text-color-disabled,
520-
$dark-switch-checked-background-color-disabled,
521-
$dark-switch-checked-indicator-background-color-disabled
508+
$switch-checked-background-color-disabled,
509+
$switch-checked-indicator-background-color-disabled
522510
);
523511

524-
.#{$ns}-control-indicator::before {
525-
background: $dark-switch-indicator-background-color;
526-
}
527-
528-
input:checked ~ .#{$ns}-control-indicator::before {
529-
background: $dark-switch-checked-indicator-background-color;
530-
}
531-
532512
// Add Windows high contrast mode styles
533513
@media (forced-colors: active) and (prefers-color-scheme: dark) {
534514
input:checked ~ .#{$ns}-control-indicator {

0 commit comments

Comments
 (0)