Skip to content

Commit af48bb0

Browse files
mmalerbajelbourn
mmalerba
authored and
jelbourn
committed
fix(slider): make slider work with dark themes (#4489)
1 parent d8aeeaa commit af48bb0

File tree

3 files changed

+60
-42
lines changed

3 files changed

+60
-42
lines changed

‎src/lib/core/theming/_palette.scss

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -679,30 +679,34 @@ $mat-dark-theme-background: (
679679

680680
// Foreground palette for light themes.
681681
$mat-light-theme-foreground: (
682-
base: black,
683-
divider: $black-12-opacity,
684-
dividers: $black-12-opacity,
685-
disabled: rgba(black, 0.38),
686-
disabled-button: rgba(black, 0.38),
687-
disabled-text: rgba(black, 0.38),
688-
hint-text: rgba(black, 0.38),
689-
secondary-text: rgba(black, 0.54),
690-
icon: rgba(black, 0.54),
691-
icons: rgba(black, 0.54),
692-
text: rgba(black, 0.87)
682+
base: black,
683+
divider: $black-12-opacity,
684+
dividers: $black-12-opacity,
685+
disabled: rgba(black, 0.38),
686+
disabled-button: rgba(black, 0.38),
687+
disabled-text: rgba(black, 0.38),
688+
hint-text: rgba(black, 0.38),
689+
secondary-text: rgba(black, 0.54),
690+
icon: rgba(black, 0.54),
691+
icons: rgba(black, 0.54),
692+
text: rgba(black, 0.87),
693+
slider-off: rgba(black, 0.26),
694+
slider-off-active: rgba(black, 0.38),
693695
);
694696

695697
// Foreground palette for dark themes.
696698
$mat-dark-theme-foreground: (
697-
base: white,
698-
divider: $white-12-opacity,
699-
dividers: $white-12-opacity,
700-
disabled: rgba(white, 0.3),
701-
disabled-button: rgba(white, 0.3),
702-
disabled-text: rgba(white, 0.3),
703-
hint-text: rgba(white, 0.3),
704-
secondary-text: rgba(white, 0.7),
705-
icon: white,
706-
icons: white,
707-
text: white
699+
base: white,
700+
divider: $white-12-opacity,
701+
dividers: $white-12-opacity,
702+
disabled: rgba(white, 0.3),
703+
disabled-button: rgba(white, 0.3),
704+
disabled-text: rgba(white, 0.3),
705+
hint-text: rgba(white, 0.3),
706+
secondary-text: rgba(white, 0.7),
707+
icon: white,
708+
icons: white,
709+
text: white,
710+
slider-off: rgba(white, 0.3),
711+
slider-off-active: rgba(white, 0.3),
708712
);

‎src/lib/slider/_slider-theme.scss

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,18 @@
1717
$primary: map-get($theme, primary);
1818
$accent: map-get($theme, accent);
1919
$warn: map-get($theme, warn);
20-
21-
$mat-slider-off-color: rgba(black, 0.26);
22-
$mat-slider-off-focused-color: rgba(black, 0.38);
23-
$mat-slider-disabled-color: rgba(black, 0.26);
24-
$mat-slider-labeled-min-value-thumb-color: black;
25-
$mat-slider-labeled-min-value-thumb-label-color: rgba(black, 0.26);
26-
$mat-slider-focus-ring-color: rgba(mat-color($accent), 0.2);
27-
$mat-slider-focus-ring-min-value-color: rgba(black, 0.12);
20+
$background: map-get($theme, background);
21+
$foreground: map-get($theme, foreground);
22+
23+
$mat-slider-off-color: mat-color($foreground, slider-off);
24+
$mat-slider-off-focused-color: mat-color($foreground, slider-off-active);
25+
$mat-slider-disabled-color: mat-color($foreground, slider-off);
26+
$mat-slider-labeled-min-value-thumb-color: mat-color($foreground, base);
27+
$mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off);
28+
$mat-slider-focus-ring-color: mat-color($accent, default, 0.2);
29+
$mat-slider-focus-ring-min-value-color: mat-color($foreground, base, 0.12);
30+
$mat-slider-tick-color: mat-color($foreground, base, 0.7);
31+
$mat-slider-tick-size: 2px;
2832

2933
.mat-slider-track-background {
3034
background-color: $mat-slider-off-color;
@@ -104,4 +108,22 @@
104108
}
105109
}
106110
}
111+
112+
.mat-slider-has-ticks .mat-slider-wrapper::after {
113+
border-color: $mat-slider-tick-color;
114+
}
115+
116+
.mat-slider-horizontal .mat-slider-ticks {
117+
background-image: repeating-linear-gradient(to right, $mat-slider-tick-color,
118+
$mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
119+
// Firefox doesn't draw the gradient correctly with 'to right'
120+
// (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).
121+
background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,
122+
$mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
123+
}
124+
125+
.mat-slider-vertical .mat-slider-ticks {
126+
background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color,
127+
$mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
128+
}
107129
}

‎src/lib/slider/slider.scss

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ $mat-slider-thumb-arrow-gap: 12px !default;
2222

2323
$mat-slider-thumb-label-size: 28px !default;
2424

25-
$mat-slider-tick-color: rgba(0, 0, 0, 0.6) !default;
2625
$mat-slider-tick-size: 2px !default;
2726

2827
$mat-slider-focus-ring-size: 30px !default;
@@ -70,6 +69,8 @@ $mat-slider-focus-ring-size: 30px !default;
7069
}
7170

7271
.mat-slider-ticks {
72+
background-repeat: repeat;
73+
background-clip: content-box;
7374
box-sizing: border-box;
7475
opacity: 0;
7576
transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
@@ -168,7 +169,8 @@ $mat-slider-focus-ring-size: 30px !default;
168169
.mat-slider-wrapper::after {
169170
content: '';
170171
position: absolute;
171-
border: 0 solid $mat-slider-tick-color;
172+
border-width: 0;
173+
border-style: solid;
172174
opacity: 0;
173175
transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
174176
}
@@ -298,13 +300,6 @@ $mat-slider-focus-ring-size: 30px !default;
298300
}
299301

300302
.mat-slider-ticks {
301-
background: repeating-linear-gradient(to right, $mat-slider-tick-color,
302-
$mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent) repeat;
303-
// Firefox doesn't draw the gradient correctly with 'to right'
304-
// (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).
305-
background: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,
306-
$mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent) repeat;
307-
background-clip: content-box;
308303
height: $mat-slider-track-thickness;
309304
width: 100%;
310305
}
@@ -386,9 +381,6 @@ $mat-slider-focus-ring-size: 30px !default;
386381
}
387382

388383
.mat-slider-ticks {
389-
background: repeating-linear-gradient(to bottom, $mat-slider-tick-color,
390-
$mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent) repeat;
391-
background-clip: content-box;
392384
width: $mat-slider-track-thickness;
393385
height: 100%;
394386
}

0 commit comments

Comments
 (0)