Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 47c0c6b

Browse files
material-web-copybaracopybara-github
material-web-copybara
authored and
copybara-github
committed
refactor(slider): Defining theme-styles for slider component and move related styling into this mixin
PiperOrigin-RevId: 466362937
1 parent b20d3d7 commit 47c0c6b

File tree

2 files changed

+145
-79
lines changed

2 files changed

+145
-79
lines changed

‎packages/mdc-slider/_slider-theme.scss

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
// stylelint-disable selector-class-pattern --
2424
// Selector '.mdc-*' should only be used in this project.
2525

26+
@use 'sass:map';
2627
@use '@material/feature-targeting/feature-targeting';
2728
@use '@material/ripple/ripple-theme';
2829
@use '@material/theme/state';
@@ -43,6 +44,148 @@ $tick-mark-active-color: on-primary;
4344
$tick-mark-inactive-color: primary;
4445
$tick-mark-opacity: 0.6;
4546

47+
$light-theme: (
48+
active-track-color: $color,
49+
active-track-height: 6px,
50+
active-track-shape: null,
51+
disabled-active-track-color: $disabled-color,
52+
disabled-active-track-opacity: null,
53+
disabled-handle-color: $disabled-color,
54+
disabled-handle-elevation: null,
55+
disabled-handle-opacity: null,
56+
disabled-inactive-track-color: $disabled-color,
57+
disabled-inactive-track-opacity: null,
58+
focus-handle-color: null,
59+
focus-state-layer-color: null,
60+
focus-state-layer-opacity: null,
61+
handle-color: $color,
62+
handle-elevation: null,
63+
handle-height: 20px,
64+
handle-shadow-color: null,
65+
handle-shape: null,
66+
handle-width: 20px,
67+
hover-handle-color: null,
68+
hover-state-layer-color: null,
69+
hover-state-layer-opacity: null,
70+
inactive-track-color: $color,
71+
inactive-track-height: 4px,
72+
inactive-track-shape: null,
73+
label-container-color: $value-indicator-color,
74+
label-container-elevation: null,
75+
label-container-height: null,
76+
label-label-text-color: $value-indicator-text-color,
77+
label-label-text-font: null,
78+
label-label-text-font-size: null,
79+
label-label-text-line-height: null,
80+
label-label-text-size: null,
81+
label-label-text-tracking: null,
82+
label-label-text-type: null,
83+
label-label-text-weight: null,
84+
pressed-handle-color: null,
85+
pressed-state-layer-color: null,
86+
pressed-state-layer-opacity: null,
87+
state-layer-size: null,
88+
track-elevation: null,
89+
with-overlap-handle-outline-color: null,
90+
with-overlap-handle-outline-width: null,
91+
with-tick-marks-active-container-color: $tick-mark-active-color,
92+
with-tick-marks-active-container-opacity: $tick-mark-opacity,
93+
with-tick-marks-container-shape: null,
94+
with-tick-marks-container-size: 2px,
95+
with-tick-marks-disabled-container-color: $disabled-color,
96+
with-tick-marks-disabled-container-opacity: $tick-mark-opacity,
97+
with-tick-marks-inactive-container-color: $tick-mark-inactive-color,
98+
with-tick-marks-inactive-container-opacity: $tick-mark-opacity,
99+
);
100+
101+
@mixin theme-styles($theme, $query: feature-targeting.all()) {
102+
$feat-structure: feature-targeting.create-target($query, structure);
103+
104+
@include theme.validate-theme-keys($light-theme, $theme);
105+
106+
@include thumb-color(
107+
$color-or-map: (
108+
default: map.get($theme, 'handle-color'),
109+
disabled: map.get($theme, 'disabled-handle-color'),
110+
),
111+
$query: $query
112+
);
113+
114+
@include thumb-ripple-color(
115+
$color: map.get($theme, 'handle-color'),
116+
$query: $query
117+
);
118+
119+
@include track-active-color(
120+
$color-or-map: (
121+
default: map.get($theme, 'active-track-color'),
122+
disabled: map.get($theme, 'disabled-active-track-color'),
123+
),
124+
$query: $query
125+
);
126+
127+
@include track-inactive-color(
128+
$color-or-map: (
129+
default: map.get($theme, 'inactive-track-color'),
130+
disabled: map.get($theme, 'disabled-inactive-track-color'),
131+
),
132+
$query: $query
133+
);
134+
135+
@include tick-mark-active-color(
136+
$color-or-map: (
137+
default: map.get($theme, 'with-tick-marks-active-container-color'),
138+
disabled: map.get($theme, 'with-tick-marks-active-container-color'),
139+
),
140+
$query: $query
141+
);
142+
143+
@include tick-mark-inactive-color(
144+
$color-or-map: (
145+
default: map.get($theme, 'with-tick-marks-inactive-container-color'),
146+
disabled: map.get($theme, 'with-tick-marks-disabled-container-color'),
147+
),
148+
$query: $query
149+
);
150+
151+
@include value-indicator-color(
152+
$color: map.get($theme, 'label-container-color'),
153+
$opacity: $value-indicator-opacity,
154+
$query: $query
155+
);
156+
157+
@include value-indicator-text-color(
158+
$color: map.get($theme, 'label-label-text-color'),
159+
$query: $query
160+
);
161+
162+
.mdc-slider__track {
163+
@include feature-targeting.targets($feat-structure) {
164+
height: map.get($theme, 'inactive-track-height');
165+
}
166+
}
167+
168+
.mdc-slider__track--active {
169+
@include feature-targeting.targets($feat-structure) {
170+
height: map.get($theme, 'active-track-height');
171+
}
172+
}
173+
174+
.mdc-slider__track--inactive {
175+
@include feature-targeting.targets($feat-structure) {
176+
height: map.get($theme, 'inactive-track-height');
177+
}
178+
}
179+
180+
.mdc-slider__tick-mark--active,
181+
.mdc-slider__tick-mark--inactive {
182+
@include feature-targeting.targets($feat-structure) {
183+
height: map.get($theme, 'with-tick-marks-container-size');
184+
width: map.get($theme, 'with-tick-marks-container-size');
185+
}
186+
}
187+
}
188+
46189
/// Customizes active track color, using a Color or state Map.
47190
/// - To set only the default color, provide a single Color.
48191
/// - To set one or more state colors, provide a state Map with optional keys.

‎packages/mdc-slider/_slider.scss

Lines changed: 2 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -61,94 +61,17 @@ $_track-inactive-height: 4px;
6161
@include static-styles($query: $query);
6262

6363
.mdc-slider {
64-
@include slider-theme.track-active-color(
65-
$color-or-map: (
66-
default: slider-theme.$color,
67-
disabled: slider-theme.$disabled-color,
68-
),
64+
@include slider-theme.theme-styles(
65+
slider-theme.$light-theme,
6966
$query: $query
7067
);
7168

72-
@include slider-theme.track-inactive-color(
73-
$color-or-map: (
74-
default: slider-theme.$color,
75-
disabled: slider-theme.$disabled-color,
76-
),
77-
$query: $query
78-
);
79-
80-
@include slider-theme.thumb-color(
81-
$color-or-map: (
82-
default: slider-theme.$color,
83-
disabled: slider-theme.$disabled-color,
84-
),
85-
$query: $query
86-
);
87-
88-
@include slider-theme.thumb-ripple-color(
89-
$color: slider-theme.$color,
90-
$query: $query
91-
);
92-
93-
@include slider-theme.tick-mark-active-color(
94-
$color-or-map: (
95-
default: slider-theme.$tick-mark-active-color,
96-
disabled: on-primary,
97-
),
98-
$query: $query
99-
);
100-
101-
@include slider-theme.tick-mark-inactive-color(
102-
$color-or-map: (
103-
default: slider-theme.$tick-mark-inactive-color,
104-
disabled: slider-theme.$disabled-color,
105-
),
106-
$query: $query
107-
);
108-
109-
@include slider-theme.value-indicator-color(
110-
$color: slider-theme.$value-indicator-color,
111-
$opacity: slider-theme.$value-indicator-opacity,
112-
$query: $query
113-
);
114-
115-
@include slider-theme.value-indicator-text-color(
116-
$color: slider-theme.$value-indicator-text-color,
117-
$query: $query
118-
);
119-
120-
.mdc-slider__track {
121-
@include feature-targeting.targets($feat-structure) {
122-
height: $_track-inactive-height;
123-
}
124-
}
125-
126-
.mdc-slider__track--active {
127-
@include feature-targeting.targets($feat-structure) {
128-
height: $_track-active-height;
129-
}
130-
}
131-
132-
.mdc-slider__track--inactive {
133-
@include feature-targeting.targets($feat-structure) {
134-
height: $_track-inactive-height;
135-
}
136-
}
137-
13869
.mdc-slider__thumb {
13970
@include feature-targeting.targets($feat-structure) {
14071
height: $_thumb-ripple-size;
14172
width: $_thumb-ripple-size;
14273
}
14374
}
144-
145-
.mdc-slider__tick-mark--active,
146-
.mdc-slider__tick-mark--inactive {
147-
@include feature-targeting.targets($feat-structure) {
148-
height: 2px;
149-
width: 2px;
150-
}
151-
}
15275
}
15376

15477
.mdc-slider--disabled {

0 commit comments

Comments
 (0)