matcha-theme 20.25.0 → 20.27.0
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.
- package/components/matcha-slider.scss +269 -0
- package/main.scss +2 -0
- package/package.json +1 -1
- package/tokens/_color-tokens.scss +1 -1
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
// Importar as variáveis de cor do sistema
|
|
2
|
+
@import "../tokens/color-tokens";
|
|
3
|
+
|
|
4
|
+
@mixin matcha-slider-theme($theme) {
|
|
5
|
+
$color-functions: (
|
|
6
|
+
red: getRed,
|
|
7
|
+
pink: getPink,
|
|
8
|
+
purple: getPurple,
|
|
9
|
+
deep-purple: getDeepPurple,
|
|
10
|
+
indigo: getIndigo,
|
|
11
|
+
blue: getBlue,
|
|
12
|
+
light-blue: getLightBlue,
|
|
13
|
+
cyan: getCyan,
|
|
14
|
+
teal: getTeal,
|
|
15
|
+
green: getGreen,
|
|
16
|
+
light-green: getLightGreen,
|
|
17
|
+
lime: getLime,
|
|
18
|
+
yellow: getYellow,
|
|
19
|
+
amber: getAmber,
|
|
20
|
+
orange: getOrange,
|
|
21
|
+
deep-orange: getDeepOrange,
|
|
22
|
+
brown: getBrown,
|
|
23
|
+
grey: getGrey,
|
|
24
|
+
blue-grey: getBlueGrey,
|
|
25
|
+
primary: getPrimary,
|
|
26
|
+
accent: getAccent,
|
|
27
|
+
warn: getWarn,
|
|
28
|
+
disabled: getDisabled,
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
.matcha-slider {
|
|
32
|
+
// Default accent color
|
|
33
|
+
&[data-color="accent"] {
|
|
34
|
+
.selection-bar {
|
|
35
|
+
background-color: getAccent($theme);
|
|
36
|
+
}
|
|
37
|
+
.pointer {
|
|
38
|
+
background-color: getAccent($theme);
|
|
39
|
+
&.focused {
|
|
40
|
+
box-shadow: 0 0 0 4px getAccent($theme);
|
|
41
|
+
}
|
|
42
|
+
&:hover {
|
|
43
|
+
box-shadow: 0 0 0 4px rgba(getAccent($theme), 0.24);
|
|
44
|
+
}
|
|
45
|
+
&:active {
|
|
46
|
+
box-shadow: 0 0 0 4px rgba(getAccent($theme), 0.24);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.slider-track {
|
|
52
|
+
background-color: getDisabled($theme);
|
|
53
|
+
}
|
|
54
|
+
// Dynamic colors
|
|
55
|
+
@each $colorName, $colorFn in $color-functions {
|
|
56
|
+
&[data-color="#{'' + $colorName}"] {
|
|
57
|
+
.selection-bar {
|
|
58
|
+
background-color: call(#{$colorFn}, $theme);
|
|
59
|
+
}
|
|
60
|
+
.pointer {
|
|
61
|
+
background-color: call(#{$colorFn}, $theme);
|
|
62
|
+
&.focused {
|
|
63
|
+
box-shadow: 0 0 0 4px call(#{$colorFn}, $theme);
|
|
64
|
+
}
|
|
65
|
+
&:hover {
|
|
66
|
+
box-shadow: 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24);
|
|
67
|
+
}
|
|
68
|
+
&:active {
|
|
69
|
+
box-shadow: 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Disabled state
|
|
76
|
+
&.disabled {
|
|
77
|
+
background-color: transparent !important;
|
|
78
|
+
|
|
79
|
+
.selection-bar {
|
|
80
|
+
background-color: getDisabled($theme);
|
|
81
|
+
}
|
|
82
|
+
.pointer {
|
|
83
|
+
background-color: getDisabled($theme);
|
|
84
|
+
}
|
|
85
|
+
.tick-value,
|
|
86
|
+
.pointer-label,
|
|
87
|
+
.floor-label,
|
|
88
|
+
.ceil-label {
|
|
89
|
+
color: getDisabled($theme);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.matcha-slider {
|
|
96
|
+
position: relative;
|
|
97
|
+
width: 100%;
|
|
98
|
+
padding: 20px 0;
|
|
99
|
+
user-select: none;
|
|
100
|
+
background-color: transparent; // Sempre transparente por padrão
|
|
101
|
+
|
|
102
|
+
.slider-track {
|
|
103
|
+
position: relative;
|
|
104
|
+
height: 4px;
|
|
105
|
+
border-radius: 2px;
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
margin: 0 10px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.selection-bar {
|
|
111
|
+
position: absolute;
|
|
112
|
+
height: 100%;
|
|
113
|
+
background-color: var(--color-accent);
|
|
114
|
+
border-radius: 2px;
|
|
115
|
+
transition: all 0.2s ease;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.pointer {
|
|
119
|
+
position: absolute;
|
|
120
|
+
top: 50%;
|
|
121
|
+
transform: translate(-50%, -50%);
|
|
122
|
+
width: 32px;
|
|
123
|
+
height: 32px;
|
|
124
|
+
background-color: var(--color-accent);
|
|
125
|
+
border-radius: 50%;
|
|
126
|
+
cursor: grab;
|
|
127
|
+
transition: all 0.2s ease;
|
|
128
|
+
border: 4px solid var(--color-bg);
|
|
129
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
130
|
+
|
|
131
|
+
&:hover {
|
|
132
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(var(--color-accent-rgb), 0.24);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&:active {
|
|
136
|
+
cursor: grabbing;
|
|
137
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(var(--color-accent-rgb), 0.24);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&:focus {
|
|
141
|
+
outline: none;
|
|
142
|
+
box-shadow: 0 0 0 2px var(--color-accent);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&.focused {
|
|
146
|
+
box-shadow: 0 0 0 2px var(--color-accent);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.pointer-label {
|
|
151
|
+
position: absolute;
|
|
152
|
+
top: -24px;
|
|
153
|
+
left: 50%;
|
|
154
|
+
transform: translateX(-50%);
|
|
155
|
+
background-color: var(--color-surface);
|
|
156
|
+
color: var(--color-fg);
|
|
157
|
+
padding: 4px 8px;
|
|
158
|
+
border-radius: 4px;
|
|
159
|
+
font-size: 16px;
|
|
160
|
+
font-weight: 400;
|
|
161
|
+
white-space: nowrap;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.tick {
|
|
165
|
+
position: absolute;
|
|
166
|
+
top: 50%;
|
|
167
|
+
transform: translate(-50%, -50%);
|
|
168
|
+
|
|
169
|
+
.tick-value {
|
|
170
|
+
position: absolute;
|
|
171
|
+
top: 15px;
|
|
172
|
+
left: 50%;
|
|
173
|
+
transform: translateX(-50%);
|
|
174
|
+
font-size: 16px;
|
|
175
|
+
color: var(--color-fg-muted);
|
|
176
|
+
white-space: nowrap;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.limit-labels {
|
|
181
|
+
display: flex;
|
|
182
|
+
justify-content: space-between;
|
|
183
|
+
margin: 8px 10px 0;
|
|
184
|
+
top:-18px;
|
|
185
|
+
position: relative;
|
|
186
|
+
font-size: 16px;
|
|
187
|
+
color: var(--color-fg-muted);
|
|
188
|
+
|
|
189
|
+
.color-placeholder {
|
|
190
|
+
color: var(--color-fg-muted);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
// Disabled state
|
|
195
|
+
&.disabled {
|
|
196
|
+
opacity: 0.6;
|
|
197
|
+
pointer-events: none;
|
|
198
|
+
background-color: transparent !important; // Força background transparente
|
|
199
|
+
|
|
200
|
+
.slider-track {
|
|
201
|
+
cursor: not-allowed;
|
|
202
|
+
background-color: $color-base-blue-grey-100; // #E2E7E9
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.pointer {
|
|
206
|
+
cursor: not-allowed;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
// Range specific styles
|
|
211
|
+
&.range {
|
|
212
|
+
.pointer {
|
|
213
|
+
&.low-pointer {
|
|
214
|
+
z-index: 2;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
&.high-pointer {
|
|
218
|
+
z-index: 1;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// Dragging state
|
|
224
|
+
&.dragging {
|
|
225
|
+
.pointer {
|
|
226
|
+
cursor: grabbing !important;
|
|
227
|
+
transform: translate(-50%, -50%) scale(1.1);
|
|
228
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.selection-bar {
|
|
232
|
+
transition: none;
|
|
233
|
+
background-color: $color-base-blue-grey-300;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// Animation
|
|
238
|
+
.pointer,
|
|
239
|
+
.selection-bar {
|
|
240
|
+
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
// Focus styles for accessibility
|
|
244
|
+
.pointer:focus-visible {
|
|
245
|
+
outline: 2px solid var(--color-accent);
|
|
246
|
+
outline-offset: 2px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
// High contrast mode support
|
|
250
|
+
@media (prefers-contrast: high) {
|
|
251
|
+
.pointer {
|
|
252
|
+
border-width: 3px;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.selection-bar {
|
|
256
|
+
border: 1px solid var(--color-fg);
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
// Reduced motion support
|
|
261
|
+
@media (prefers-reduced-motion: reduce) {
|
|
262
|
+
.pointer,
|
|
263
|
+
.selection-bar {
|
|
264
|
+
transition: none;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
|
package/main.scss
CHANGED
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
@import "./components/matcha-radio.scss"; // matcha-radio($theme)
|
|
53
53
|
@import "./components/matcha-avatar.scss"; // matcha-avatar($theme)
|
|
54
54
|
@import "./components/matcha-paginator.scss"; // matcha-paginator($theme)
|
|
55
|
+
@import "./components/matcha-slider.scss"; // matcha-slider($theme)
|
|
55
56
|
|
|
56
57
|
@import "./components/matcha-highlight.scss"; // matcha-highlight($theme)
|
|
57
58
|
@import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
|
|
@@ -171,5 +172,6 @@
|
|
|
171
172
|
@include matcha-option-theme($theme);
|
|
172
173
|
@include matcha-select-theme($theme);
|
|
173
174
|
@include matcha-paginator-theme($theme);
|
|
175
|
+
@include matcha-slider-theme($theme);
|
|
174
176
|
@include matcha-highlight-theme($theme);
|
|
175
177
|
}
|
package/package.json
CHANGED
|
@@ -699,7 +699,7 @@ $mat-light-green: (
|
|
|
699
699
|
300: $dark-primary-text,
|
|
700
700
|
400: $dark-primary-text,
|
|
701
701
|
500: $dark-primary-text,
|
|
702
|
-
600: $
|
|
702
|
+
600: $light-primary-text,
|
|
703
703
|
700: $light-primary-text,
|
|
704
704
|
800: $light-primary-text,
|
|
705
705
|
900: $light-primary-text,
|