matcha-theme 19.74.0 → 19.76.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.
Files changed (2) hide show
  1. package/components/matcha-slide-toggle.scss +87 -57
  2. package/package.json +1 -1
package/components/matcha-slide-toggle.scss CHANGED
@@ -2,11 +2,12 @@
2
2
  matcha-slide-toggle {
3
3
  input[type="checkbox"] {
4
4
  &::before {
5
- background-color: getDisabled($theme);
5
+ background-color: getSurface($theme);
6
+ border-color:getPrimary($theme);
6
7
  }
7
8
  &::after {
8
- box-shadow: getDisabledContrast($theme);
9
- background-color: getGrey($theme);
9
+ box-shadow: getDisabled($theme);
10
+ background-color: getPrimary($theme);
10
11
  }
11
12
  }
12
13
  &:not([color]),
@@ -14,10 +15,11 @@
14
15
  input[type="checkbox"] {
15
16
  &:checked {
16
17
  &::before {
17
- background-color: getAccentAlpha($theme);
18
+ background-color: getAccent($theme);
19
+ border-color:getAccent($theme);
18
20
  }
19
21
  &::after {
20
- background-color: getAccent($theme);
22
+ background-color: getAccentContrast($theme);
21
23
  }
22
24
  }
23
25
  }
@@ -28,10 +30,11 @@
28
30
  input[type="checkbox"] {
29
31
  &:checked {
30
32
  &::before {
31
- background-color: getRedAlpha($theme);
33
+ background-color: getRed($theme);
34
+ border-color:getRed($theme);
32
35
  }
33
36
  &::after {
34
- background-color: getRed($theme);
37
+ background-color: getRedContrast($theme);
35
38
  }
36
39
  }
37
40
  }
@@ -42,10 +45,11 @@
42
45
  input[type="checkbox"] {
43
46
  &:checked {
44
47
  &::before {
45
- background-color: getPinkAlpha($theme);
48
+ background-color: getPink($theme);
49
+ border-color:getPink($theme);
46
50
  }
47
51
  &::after {
48
- background-color: getPink($theme);
52
+ background-color: getPinkContrast($theme);
49
53
  }
50
54
  }
51
55
  }
@@ -55,11 +59,12 @@
55
59
  &[color="purple"] {
56
60
  input[type="checkbox"] {
57
61
  &:checked {
58
- &::before {
59
- background-color: getPurpleAlpha($theme);
62
+ &::before {
63
+ background-color: getPurple($theme);
64
+ border-color:getPurple($theme);
60
65
  }
61
66
  &::after {
62
- background-color: getPurple($theme);
67
+ background-color: getPurpleContrast($theme);
63
68
  }
64
69
  }
65
70
  }
@@ -70,10 +75,11 @@
70
75
  input[type="checkbox"] {
71
76
  &:checked {
72
77
  &::before {
73
- background-color: getDeepPurpleAlpha($theme);
78
+ background-color: getDeepPurple($theme);
79
+ border-color:getDeepPurple($theme);
74
80
  }
75
81
  &::after {
76
- background-color: getDeepPurple($theme);
82
+ background-color: getDeepPurpleContrast($theme);
77
83
  }
78
84
  }
79
85
  }
@@ -84,10 +90,11 @@
84
90
  input[type="checkbox"] {
85
91
  &:checked {
86
92
  &::before {
87
- background-color: getIndigoAlpha($theme);
93
+ background-color: getIndigo($theme);
94
+ border-color:getIndigo($theme);
88
95
  }
89
96
  &::after {
90
- background-color: getIndigo($theme);
97
+ background-color: getIndigoContrast($theme);
91
98
  }
92
99
  }
93
100
  }
@@ -98,10 +105,11 @@
98
105
  input[type="checkbox"] {
99
106
  &:checked {
100
107
  &::before {
101
- background-color: getBlueAlpha($theme);
108
+ background-color: getBlue($theme);
109
+ border-color:getBlue($theme);
102
110
  }
103
111
  &::after {
104
- background-color: getBlue($theme);
112
+ background-color: getBlueContrast($theme);
105
113
  }
106
114
  }
107
115
  }
@@ -112,10 +120,11 @@
112
120
  input[type="checkbox"] {
113
121
  &:checked {
114
122
  &::before {
115
- background-color: getLightBlueAlpha($theme);
123
+ background-color: getLightBlue($theme);
124
+ border-color:getLightBlue($theme);
116
125
  }
117
126
  &::after {
118
- background-color: getLightBlue($theme);
127
+ background-color: getLightBlueContrast($theme);
119
128
  }
120
129
  }
121
130
  }
@@ -126,10 +135,11 @@
126
135
  input[type="checkbox"] {
127
136
  &:checked {
128
137
  &::before {
129
- background-color: getCyanAlpha($theme);
138
+ background-color: getCyan($theme);
139
+ border-color:getCyan($theme);
130
140
  }
131
141
  &::after {
132
- background-color: getCyan($theme);
142
+ background-color: getCyanContrast($theme);
133
143
  }
134
144
  }
135
145
  }
@@ -140,10 +150,11 @@
140
150
  input[type="checkbox"] {
141
151
  &:checked {
142
152
  &::before {
143
- background-color: getTealAlpha($theme);
153
+ background-color: getTeal($theme);
154
+ border-color:getTeal($theme);
144
155
  }
145
156
  &::after {
146
- background-color: getTeal($theme);
157
+ background-color: getTealContrast($theme);
147
158
  }
148
159
  }
149
160
  }
@@ -154,10 +165,11 @@
154
165
  input[type="checkbox"] {
155
166
  &:checked {
156
167
  &::before {
157
- background-color: getGreenAlpha($theme);
168
+ background-color: getGreen($theme);
169
+ border-color:getGreen($theme);
158
170
  }
159
171
  &::after {
160
- background-color: getGreen($theme);
172
+ background-color: getGreenContrast($theme);
161
173
  }
162
174
  }
163
175
  }
@@ -168,10 +180,11 @@
168
180
  input[type="checkbox"] {
169
181
  &:checked {
170
182
  &::before {
171
- background-color: getLightGreenAlpha($theme);
183
+ background-color: getLightGreen($theme);
184
+ border-color:getLightGreen($theme);
172
185
  }
173
186
  &::after {
174
- background-color: getLightGreen($theme);
187
+ background-color: getLightGreenContrast($theme);
175
188
  }
176
189
  }
177
190
  }
@@ -182,10 +195,11 @@
182
195
  input[type="checkbox"] {
183
196
  &:checked {
184
197
  &::before {
185
- background-color: getLimeAlpha($theme);
198
+ background-color: getLime($theme);
199
+ border-color:getLime($theme);
186
200
  }
187
201
  &::after {
188
- background-color: getLime($theme);
202
+ background-color: getLimeContrast($theme);
189
203
  }
190
204
  }
191
205
  }
@@ -196,10 +210,11 @@
196
210
  input[type="checkbox"] {
197
211
  &:checked {
198
212
  &::before {
199
- background-color: getYellowAlpha($theme);
213
+ background-color: getYellow($theme);
214
+ border-color:getYellow($theme);
200
215
  }
201
216
  &::after {
202
- background-color: getYellow($theme);
217
+ background-color: getYellowContrast($theme);
203
218
  }
204
219
  }
205
220
  }
@@ -210,10 +225,11 @@
210
225
  input[type="checkbox"] {
211
226
  &:checked {
212
227
  &::before {
213
- background-color: getAmberAlpha($theme);
228
+ background-color: getAmber($theme);
229
+ border-color:getAmber($theme);
214
230
  }
215
231
  &::after {
216
- background-color: getAmber($theme);
232
+ background-color: getAmberContrast($theme);
217
233
  }
218
234
  }
219
235
  }
@@ -224,10 +240,11 @@
224
240
  input[type="checkbox"] {
225
241
  &:checked {
226
242
  &::before {
227
- background-color: getOrangeAlpha($theme);
243
+ background-color: getOrange($theme);
244
+ border-color:getOrange($theme);
228
245
  }
229
246
  &::after {
230
- background-color: getOrange($theme);
247
+ background-color: getOrangeContrast($theme);
231
248
  }
232
249
  }
233
250
  }
@@ -238,10 +255,11 @@
238
255
  input[type="checkbox"] {
239
256
  &:checked {
240
257
  &::before {
241
- background-color: getDeepOrangeAlpha($theme);
258
+ background-color: getDeepOrange($theme);
259
+ border-color:getDeepOrange($theme);
242
260
  }
243
261
  &::after {
244
- background-color: getDeepOrange($theme);
262
+ background-color: getDeepOrangeContrast($theme);
245
263
  }
246
264
  }
247
265
  }
@@ -252,10 +270,11 @@
252
270
  input[type="checkbox"] {
253
271
  &:checked {
254
272
  &::before {
255
- background-color: getBrownAlpha($theme);
273
+ background-color: getBrown($theme);
274
+ border-color:getBrown($theme);
256
275
  }
257
276
  &::after {
258
- background-color: getBrown($theme);
277
+ background-color: getBrownContrast($theme);
259
278
  }
260
279
  }
261
280
  }
@@ -266,10 +285,11 @@
266
285
  input[type="checkbox"] {
267
286
  &:checked {
268
287
  &::before {
269
- background-color: getGreyAlpha($theme);
288
+ background-color: getGrey($theme);
289
+ border-color:getGrey($theme);
270
290
  }
271
291
  &::after {
272
- background-color: getGrey($theme);
292
+ background-color: getGreyContrast($theme);
273
293
  }
274
294
  }
275
295
  }
@@ -279,11 +299,12 @@
279
299
  &[color="blue-grey"] {
280
300
  input[type="checkbox"] {
281
301
  &:checked {
282
- &::before {
283
- background-color: getBlueGreyAlpha($theme);
302
+ &::before {
303
+ background-color: getBlueGrey($theme);
304
+ border-color:getBlueGrey($theme);
284
305
  }
285
306
  &::after {
286
- background-color: getBlueGrey($theme);
307
+ background-color: getBlueGreyContrast($theme);
287
308
  }
288
309
  }
289
310
  }
@@ -294,10 +315,11 @@
294
315
  input[type="checkbox"] {
295
316
  &:checked {
296
317
  &::before {
297
- background-color: getPrimaryAlpha($theme);
318
+ background-color: getPrimary($theme);
319
+ border-color:getPrimary($theme);
298
320
  }
299
321
  &::after {
300
- background-color: getPrimary($theme);
322
+ background-color: getPrimaryContrast($theme);
301
323
  }
302
324
  }
303
325
  }
@@ -308,10 +330,11 @@
308
330
  input[type="checkbox"] {
309
331
  &:checked {
310
332
  &::before {
311
- background-color: getWarnAlpha($theme);
333
+ background-color: getWarn($theme);
334
+ border-color:getWarn($theme);
312
335
  }
313
336
  &::after {
314
- background-color: getWarn($theme);
337
+ background-color: getWarnContrast($theme);
315
338
  }
316
339
  }
317
340
  }
@@ -355,7 +378,7 @@
355
378
  height: 20px;
356
379
  margin: 0;
357
380
  outline: none;
358
- cursor: pointer;
381
+ cursor: pointer;
359
382
  vertical-align: middle;
360
383
 
361
384
  &::before {
@@ -365,18 +388,21 @@
365
388
  left: 0;
366
389
  transform: translateY(-50%);
367
390
  width: 100%;
368
- height: 14px;
369
- border-radius: 7px;
391
+ height: 20px;
392
+ border-width:2px;
393
+ border-style: solid;
394
+ border-radius: 12px;
395
+ box-sizing: border-box;
370
396
  transition: background-color 0.15s linear;
371
397
  }
372
398
 
373
399
  &::after {
374
400
  content: "";
375
401
  position: absolute;
376
- top: 0;
377
- left: -1px;
378
- width: 20px;
379
- height: 20px;
402
+ top: 4px;
403
+ left: 3px;
404
+ width: 12px;
405
+ height: 12px;
380
406
  border-radius: 50%;
381
407
  transition:
382
408
  transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
@@ -385,7 +411,11 @@
385
411
  }
386
412
 
387
413
  &:checked {
388
- &::after {
414
+ &::after {
415
+ top: 2px;
416
+ left: 1px;
417
+ width: 16px;
418
+ height: 16px;
389
419
  transform: translateX(17px);
390
420
  }
391
421
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "19.74.0",
3
+ "version": "19.76.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {