matcha-theme 19.31.0 → 19.33.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.
@@ -0,0 +1,391 @@
1
+ @mixin matcha-checkbox($theme) {
2
+ matcha-checkbox {
3
+ //normal use accent color
4
+ &:not([color]) {
5
+ input[type="checkbox"] {
6
+ border-color: getBlueGrey($theme);
7
+ &:active {
8
+ border-color: getAccent($theme);
9
+ }
10
+ &:checked {
11
+ background-color: getAccent($theme);
12
+ border-color: getAccent($theme);
13
+
14
+ &::after {
15
+ border-color: getAccentContrast($theme);
16
+ }
17
+ }
18
+
19
+ &:indeterminate {
20
+ background-color: getGrey($theme);
21
+ border-color: getGrey($theme);
22
+
23
+ &::after {
24
+ background-color: getGreyContrast($theme);
25
+ }
26
+ }
27
+ }
28
+
29
+ .matcha-checkbox-container {
30
+ &:hover {
31
+ background-color: rgba(getAccent($theme), 0.1);
32
+ }
33
+ .ripple{
34
+ background: rgba(getAccent($theme), 0.2) !important;
35
+ }
36
+ }
37
+ }
38
+
39
+ //use custom color
40
+ &[color]{
41
+ input[type="checkbox"] {
42
+ border-color: getBlueGrey($theme);
43
+
44
+ &:indeterminate {
45
+ background-color: getGrey($theme);
46
+ border-color: getGrey($theme);
47
+
48
+ &::after {
49
+ background-color: getGreyContrast($theme);
50
+ }
51
+ }
52
+ }
53
+
54
+ }
55
+
56
+ // red
57
+ &[color="red"] {
58
+ input[type="checkbox"]:active {border-color: getRed($theme);}
59
+ input[type="checkbox"]:checked {
60
+ background-color: getRed($theme);
61
+ border-color: getRed($theme);
62
+ }
63
+ input[type="checkbox"]:checked::after {border-color: getRedContrast($theme);}
64
+ .matcha-checkbox-container:hover {background-color: rgba(getRed($theme), 0.1);}
65
+ .matcha-checkbox-container .ripple{background: rgba(getRedContrast($theme), 0.2) !important;}
66
+ }
67
+
68
+ &[color="pink"] {
69
+ input[type="checkbox"]:active {border-color: getPink($theme);}
70
+ input[type="checkbox"]:checked {
71
+ background-color: getPink($theme);
72
+ border-color: getPink($theme);
73
+ }
74
+ input[type="checkbox"]:checked::after {border-color: getPinkContrast($theme);}
75
+ .matcha-checkbox-container:hover {background-color: rgba(getPink($theme), 0.1);}
76
+ .matcha-checkbox-container .ripple{background: rgba(getPinkContrast($theme), 0.2) !important;}
77
+ }
78
+
79
+ &[color="purple"] {
80
+ input[type="checkbox"]:active {border-color: getPurple($theme);}
81
+ input[type="checkbox"]:checked {
82
+ background-color: getPurple($theme);
83
+ border-color: getPurple($theme);
84
+ }
85
+ input[type="checkbox"]:checked::after {border-color: getPurpleContrast($theme);}
86
+ .matcha-checkbox-container:hover {background-color: rgba(getPurple($theme), 0.1);}
87
+ .matcha-checkbox-container .ripple{background: rgba(getPurpleContrast($theme), 0.2) !important;}
88
+ }
89
+
90
+ &[color="deep-purple"] {
91
+ input[type="checkbox"]:active {border-color: getDeepPurple($theme);}
92
+ input[type="checkbox"]:checked {
93
+ background-color: getDeepPurple($theme);
94
+ border-color: getDeepPurple($theme);
95
+ }
96
+ input[type="checkbox"]:checked::after {border-color: getDeepPurpleContrast($theme);}
97
+ .matcha-checkbox-container:hover {background-color: rgba(getDeepPurple($theme), 0.1);}
98
+ .matcha-checkbox-container .ripple{background: rgba(getDeepPurpleContrast($theme), 0.2) !important;}
99
+ }
100
+
101
+ &[color="indigo"] {
102
+ input[type="checkbox"]:active {border-color: getIndigo($theme);}
103
+ input[type="checkbox"]:checked {
104
+ background-color: getIndigo($theme);
105
+ border-color: getIndigo($theme);
106
+ }
107
+ input[type="checkbox"]:checked::after {border-color: getIndigoContrast($theme);}
108
+ .matcha-checkbox-container:hover {background-color: rgba(getIndigo($theme), 0.1);}
109
+ .matcha-checkbox-container .ripple{background: rgba(getIndigoContrast($theme), 0.2) !important;}
110
+ }
111
+
112
+ &[color="blue"] {
113
+ input[type="checkbox"]:active {border-color: getBlue($theme);}
114
+ input[type="checkbox"]:checked {
115
+ background-color: getBlue($theme);
116
+ border-color: getBlue($theme);
117
+ }
118
+ input[type="checkbox"]:checked::after {border-color: getBlueContrast($theme);}
119
+ .matcha-checkbox-container:hover {background-color: rgba(getBlue($theme), 0.1);}
120
+ .matcha-checkbox-container .ripple{background: rgba(getBlueContrast($theme), 0.2) !important;}
121
+ }
122
+
123
+ &[color="light-blue"] {
124
+ input[type="checkbox"]:active {border-color: getLightBlue($theme);}
125
+ input[type="checkbox"]:checked {
126
+ background-color: getLightBlue($theme);
127
+ border-color: getLightBlue($theme);
128
+ }
129
+ input[type="checkbox"]:checked::after {border-color: getLightBlueContrast($theme);}
130
+ .matcha-checkbox-container:hover {background-color: rgba(getLightBlue($theme), 0.1);}
131
+ .matcha-checkbox-container .ripple{background: rgba(getLightBlueContrast($theme), 0.2) !important;}
132
+ }
133
+
134
+ &[color="cyan"] {
135
+ input[type="checkbox"]:active {border-color: getCyan($theme);}
136
+ input[type="checkbox"]:checked {
137
+ background-color: getCyan($theme);
138
+ border-color: getCyan($theme);
139
+ }
140
+ input[type="checkbox"]:checked::after {border-color: getCyanContrast($theme);}
141
+ .matcha-checkbox-container:hover {background-color: rgba(getCyan($theme), 0.1);}
142
+ .matcha-checkbox-container .ripple{background: rgba(getCyanContrast($theme), 0.2) !important;}
143
+ }
144
+
145
+ &[color="teal"] {
146
+ input[type="checkbox"]:active {border-color: getTeal($theme);}
147
+ input[type="checkbox"]:checked {
148
+ background-color: getTeal($theme);
149
+ border-color: getTeal($theme);
150
+ }
151
+ input[type="checkbox"]:checked::after {border-color: getTealContrast($theme);}
152
+ .matcha-checkbox-container:hover {background-color: rgba(getTeal($theme), 0.1);}
153
+ .matcha-checkbox-container .ripple{background: rgba(getTealContrast($theme), 0.2) !important;}
154
+ }
155
+
156
+ &[color="green"] {
157
+ input[type="checkbox"]:active {border-color: getGreen($theme);}
158
+ input[type="checkbox"]:checked {
159
+ background-color: getGreen($theme);
160
+ border-color: getGreen($theme);
161
+ }
162
+ input[type="checkbox"]:checked::after {border-color: getGreenContrast($theme);}
163
+ .matcha-checkbox-container:hover {background-color: rgba(getGreen($theme), 0.1);}
164
+ .matcha-checkbox-container .ripple{background: rgba(getGreenContrast($theme), 0.2) !important;}
165
+ }
166
+
167
+ &[color="light-green"] {
168
+ input[type="checkbox"]:active {border-color: getLightGreen($theme);}
169
+ input[type="checkbox"]:checked {
170
+ background-color: getLightGreen($theme);
171
+ border-color: getLightGreen($theme);
172
+ }
173
+ input[type="checkbox"]:checked::after {border-color: getLightGreenContrast($theme);}
174
+ .matcha-checkbox-container:hover {background-color: rgba(getLightGreen($theme), 0.1);}
175
+ .matcha-checkbox-container .ripple{background: rgba(getLightGreenContrast($theme), 0.2) !important;}
176
+ }
177
+
178
+ &[color="lime"] {
179
+ input[type="checkbox"]:active {border-color: getLime($theme);}
180
+ input[type="checkbox"]:checked {
181
+ background-color: getLime($theme);
182
+ border-color: getLime($theme);
183
+ }
184
+ input[type="checkbox"]:checked::after {border-color: getLimeContrast($theme);}
185
+ .matcha-checkbox-container:hover {background-color: rgba(getLime($theme), 0.1);}
186
+ .matcha-checkbox-container .ripple{background: rgba(getLimeContrast($theme), 0.2) !important;}
187
+ }
188
+
189
+ &[color="yellow"] {
190
+ input[type="checkbox"]:active {border-color: getYellow($theme);}
191
+ input[type="checkbox"]:checked {
192
+ background-color: getYellow($theme);
193
+ border-color: getYellow($theme);
194
+ }
195
+ input[type="checkbox"]:checked::after {border-color: getYellowContrast($theme);}
196
+ .matcha-checkbox-container:hover {background-color: rgba(getYellow($theme), 0.1);}
197
+ .matcha-checkbox-container .ripple{background: rgba(getYellowContrast($theme), 0.2) !important;}
198
+ }
199
+
200
+ &[color="amber"] {
201
+ input[type="checkbox"]:active {border-color: getAmber($theme);}
202
+ input[type="checkbox"]:checked {
203
+ background-color: getAmber($theme);
204
+ border-color: getAmber($theme);
205
+ }
206
+ input[type="checkbox"]:checked::after {border-color: getAmberContrast($theme);}
207
+ .matcha-checkbox-container:hover {background-color: rgba(getAmber($theme), 0.1);}
208
+ .matcha-checkbox-container .ripple{background: rgba(getAmberContrast($theme), 0.2) !important;}
209
+ }
210
+
211
+ &[color="orange"] {
212
+ input[type="checkbox"]:active {border-color: getOrange($theme);}
213
+ input[type="checkbox"]:checked {
214
+ background-color: getOrange($theme);
215
+ border-color: getOrange($theme);
216
+ }
217
+ input[type="checkbox"]:checked::after {border-color: getOrangeContrast($theme);}
218
+ .matcha-checkbox-container:hover {background-color: rgba(getOrange($theme), 0.1);}
219
+ .matcha-checkbox-container .ripple{background: rgba(getOrangeContrast($theme), 0.2) !important;}
220
+ }
221
+
222
+ &[color="deep-orange"] {
223
+ input[type="checkbox"]:active {border-color: getDeepOrange($theme);}
224
+ input[type="checkbox"]:checked {
225
+ background-color: getDeepOrange($theme);
226
+ border-color: getDeepOrange($theme);
227
+ }
228
+ input[type="checkbox"]:checked::after {border-color: getDeepOrangeContrast($theme);}
229
+ .matcha-checkbox-container:hover {background-color: rgba(getDeepOrange($theme), 0.1);}
230
+ .matcha-checkbox-container .ripple{background: rgba(getDeepOrangeContrast($theme), 0.2) !important;}
231
+ }
232
+
233
+ &[color="brown"] {
234
+ input[type="checkbox"]:active {border-color: getBrown($theme);}
235
+ input[type="checkbox"]:checked {
236
+ background-color: getBrown($theme);
237
+ border-color: getBrown($theme);
238
+ }
239
+ input[type="checkbox"]:checked::after {border-color: getBrownContrast($theme);}
240
+ .matcha-checkbox-container:hover {background-color: rgba(getBrown($theme), 0.1);}
241
+ .matcha-checkbox-container .ripple{background: rgba(getBrownContrast($theme), 0.2) !important;}
242
+ }
243
+
244
+ &[color="grey"] {
245
+ input[type="checkbox"]:active {border-color: getGrey($theme);}
246
+ input[type="checkbox"]:checked {
247
+ background-color: getGrey($theme);
248
+ border-color: getGrey($theme);
249
+ }
250
+ input[type="checkbox"]:checked::after {border-color: getGreyContrast($theme);}
251
+ .matcha-checkbox-container:hover {background-color: rgba(getGrey($theme), 0.1);}
252
+ .matcha-checkbox-container .ripple{background: rgba(getGreyContrast($theme), 0.2) !important;}
253
+ }
254
+
255
+ &[color="blue-grey"] {
256
+ input[type="checkbox"]:active {border-color: getBlueGrey($theme);}
257
+ input[type="checkbox"]:checked {
258
+ background-color: getBlueGrey($theme);
259
+ border-color: getBlueGrey($theme);
260
+ }
261
+ input[type="checkbox"]:checked::after {border-color: getBlueGreyContrast($theme);}
262
+ .matcha-checkbox-container:hover {background-color: rgba(getBlueGrey($theme), 0.1);}
263
+ .matcha-checkbox-container .ripple{background: rgba(getBlueGreyContrast($theme), 0.2) !important;}
264
+ }
265
+
266
+ // primary
267
+ &[color="primary"] {
268
+ input[type="checkbox"]:active {border-color: getPrimary($theme);}
269
+ input[type="checkbox"]:checked {
270
+ background-color: getPrimary($theme);
271
+ border-color: getPrimary($theme);
272
+ }
273
+ input[type="checkbox"]:checked::after {border-color: getPrimaryContrast($theme);}
274
+ .matcha-checkbox-container:hover {background-color: rgba(getPrimary($theme), 0.1);}
275
+ .matcha-checkbox-container .ripple{background: rgba(getPrimaryContrast($theme), 0.2) !important;}
276
+ }
277
+
278
+
279
+ // accent
280
+ &[color="accent"] {
281
+ input[type="checkbox"]:active {border-color: getAccent($theme);}
282
+ input[type="checkbox"]:checked {
283
+ background-color: getAccent($theme);
284
+ border-color: getAccent($theme);
285
+ }
286
+ input[type="checkbox"]:checked::after {border-color: getAccentContrast($theme);}
287
+ .matcha-checkbox-container:hover {background-color: rgba(getAccent($theme), 0.1);}
288
+ .matcha-checkbox-container .ripple{background: rgba(getAccentContrast($theme), 0.2) !important;}
289
+ }
290
+
291
+ // warn
292
+ &[color="warn"] {
293
+ input[type="checkbox"]:active {border-color: getWarn($theme);}
294
+ input[type="checkbox"]:checked {
295
+ background-color: getWarn($theme);
296
+ border-color: getWarn($theme);
297
+ }
298
+ input[type="checkbox"]:checked::after {border-color: getWarnContrast($theme);}
299
+ .matcha-checkbox-container:hover {background-color: rgba(getWarn($theme), 0.1);}
300
+ .matcha-checkbox-container .ripple{background: rgba(getWarnContrast($theme), 0.2) !important;}
301
+ }
302
+
303
+ // disabled
304
+ &[disabled] {
305
+ input[type="checkbox"] {
306
+ border-color: getGrey($theme);
307
+ }
308
+ }
309
+
310
+ .matcha-checkbox-label {
311
+ color: getGrey($theme);
312
+ }
313
+ }
314
+ }
315
+
316
+ matcha-checkbox {
317
+ display: inline-flex;
318
+ align-items: center;
319
+ gap: 8px;
320
+ cursor: pointer;
321
+
322
+ input[type="checkbox"] {
323
+ appearance: none;
324
+ -webkit-appearance: none;
325
+ width: 18px;
326
+ height: 18px;
327
+ border-radius: 4px;
328
+ border-width: 2px;
329
+ border-style: solid;
330
+ outline: none;
331
+ cursor: pointer;
332
+ position: relative;
333
+ transition: all 0.2s ease;
334
+
335
+ &:checked {
336
+
337
+ &::after {
338
+ content: '';
339
+ position: absolute;
340
+ left: 4px;
341
+ top: 0px;
342
+ width: 5px;
343
+ height: 10px;
344
+ border-style: solid;
345
+ border-width: 0 2px 2px 0;
346
+ transform: rotate(45deg);
347
+ }
348
+ }
349
+
350
+ &:indeterminate {
351
+
352
+ &::after {
353
+ content: '';
354
+ position: absolute;
355
+ left: 3px;
356
+ top: 7px;
357
+ width: 8px;
358
+ height: 2px;
359
+ }
360
+ }
361
+
362
+ &:disabled {
363
+ cursor: not-allowed;
364
+ }
365
+
366
+ &:focus {
367
+ }
368
+ }
369
+
370
+ .matcha-checkbox-label {
371
+ font-size: 14px;
372
+ user-select: none;
373
+ cursor: pointer;
374
+ }
375
+
376
+ &[disabled] {
377
+ cursor: not-allowed;
378
+ opacity: 0.6;
379
+
380
+ input[type="checkbox"] {
381
+ border-width: 2px;
382
+ border-style: solid;
383
+ }
384
+
385
+ .matcha-checkbox-label {
386
+ cursor: not-allowed;
387
+ }
388
+ }
389
+
390
+ }
391
+
@@ -5,6 +5,13 @@
5
5
  $background: map-get($theme, background);
6
6
  $foreground: map-get($theme, foreground);
7
7
 
8
+ $palettes: getBaseColorsPalettes();
9
+ $grey: map-get($palettes, grey);
10
+
11
+ $is-dark: map-get($theme, is-dark);
12
+ $get-shade: if($is-dark, 100, 500); // Define $red-shade com base no valor de $is-dark
13
+
14
+
8
15
  .matcha-form-field {
9
16
  input[type="text"],
10
17
  input[type="email"],
@@ -15,7 +22,7 @@
15
22
  input[type="search"],
16
23
  textarea {
17
24
  background-color: unset;
18
- color: var(--fg);
25
+ color: map-get($grey, $get-shade);
19
26
  border: 0px solid #ccc;
20
27
  }
21
28
 
@@ -47,6 +54,8 @@
47
54
  font-size: 16px;
48
55
  min-height: 16px; /* Mantém a altura dos inputs de texto */
49
56
  resize: none;
57
+ font-weight: 500;
58
+ line-height: 20px;
50
59
  }
51
60
 
52
61
  input[type="text"]:focus,
@@ -0,0 +1,7 @@
1
+ @mixin matcha-ripple-theme($theme) {
2
+
3
+ [matchaRipple] .ripple {
4
+ transform-origin: center;
5
+ pointer-events: none;
6
+ }
7
+ }
package/main.scss CHANGED
@@ -35,6 +35,8 @@
35
35
  @import "./components/matcha-table.scss"; // matcha-table-theme($theme)
36
36
  @import "./components/matcha-tooltip.scss"; // matcha-tooltip-theme($theme)
37
37
  @import "./components/matcha-form-field.scss";
38
+ @import "./components/matcha-checkbox.scss";
39
+ @import "./components/matcha-ripple.scss"; // matcha-ripple-theme($theme)
38
40
 
39
41
  // VENDORS
40
42
  @import "./vendors/angular-editor.scss";
@@ -127,8 +129,10 @@
127
129
  @include matcha-table-theme($theme);
128
130
 
129
131
  @include matcha-button-theme($theme);
132
+ @include matcha-ripple-theme($theme);
130
133
  @include matcha-tooltip-theme($theme);
131
134
  @include matcha-header-theme($theme);
132
135
  @include matcha-menu-theme($theme);
133
136
  @include matcha-form-field($theme);
137
+ @include matcha-checkbox($theme);
134
138
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "19.31.0",
3
+ "version": "19.33.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {