matcha-theme 19.145.0 → 20.2.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 (3) hide show
  1. package/main.scss +0 -2
  2. package/package.json +1 -1
  3. package/components/matcha-radio.scss +0 -335
package/main.scss CHANGED
@@ -45,7 +45,6 @@
45
45
  @import "./components/matcha-spinner.scss"; // matcha-spinner-theme($theme)
46
46
  @import "./components/matcha-hint-text.scss"; // matcha-hint-theme($theme)
47
47
  @import "./components/matcha-slide-toggle.scss"; // matcha-slide-toggle($theme)
48
- @import "./components/matcha-radio.scss"; // matcha-radio($theme)
49
48
 
50
49
  @import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
51
50
  @import "./components/matcha-modal.scss"; // matcha-modal($theme)
@@ -155,5 +154,4 @@
155
154
  @include matcha-tabs($theme);
156
155
  @include matcha-modal-theme($theme);
157
156
  @include matcha-skeleton-theme($theme);
158
- @include matcha-radio($theme);
159
157
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "19.145.0",
3
+ "version": "20.2.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/components/matcha-radio.scss DELETED
@@ -1,335 +0,0 @@
1
- @mixin matcha-radio($theme) {
2
- matcha-radio {
3
- //normal use accent color
4
- &:not([color]) {
5
- input[type="radio"] {
6
- border-color: getBlueGrey($theme);
7
- &:active {
8
- border-color: getAccent($theme);
9
- }
10
- &:checked {
11
- border-color: getAccent($theme);
12
-
13
- &::after {
14
- background-color: getAccent($theme);
15
- }
16
- }
17
-
18
- }
19
-
20
- .matcha-radio-container {
21
- &:hover {
22
- background-color: rgba(getAccent($theme), 0.1);
23
- }
24
- .ripple{
25
- background: rgba(getAccent($theme), 0.2) !important;
26
- }
27
- }
28
- }
29
-
30
- //use custom color
31
- &[color]{
32
- input[type="radio"] {
33
- border-color: getBlueGrey($theme);
34
- }
35
-
36
- }
37
-
38
- // red
39
- &[color="red"] {
40
- input[type="radio"]:active {border-color: getRed($theme);}
41
- input[type="radio"]:checked {
42
- border-color: getRed($theme);
43
- }
44
- input[type="radio"]:checked::after {background-color: getRed($theme);}
45
- .matcha-radio-container:hover {background-color: rgba(getRed($theme), 0.1);}
46
- .matcha-radio-container .ripple{background: rgba(getRedContrast($theme), 0.2) !important;}
47
- }
48
-
49
- &[color="pink"] {
50
- input[type="radio"]:active {border-color: getPink($theme);}
51
- input[type="radio"]:checked {
52
- border-color: getPink($theme);
53
- }
54
- input[type="radio"]:checked::after {background-color: getPink($theme);}
55
- .matcha-radio-container:hover {background-color: rgba(getPink($theme), 0.1);}
56
- .matcha-radio-container .ripple{background: rgba(getPinkContrast($theme), 0.2) !important;}
57
- }
58
-
59
- &[color="purple"] {
60
- input[type="radio"]:active {border-color: getPurple($theme);}
61
- input[type="radio"]:checked {
62
- border-color: getPurple($theme);
63
- }
64
- input[type="radio"]:checked::after {background-color: getPurple($theme);}
65
- .matcha-radio-container:hover {background-color: rgba(getPurple($theme), 0.1);}
66
- .matcha-radio-container .ripple{background: rgba(getPurpleContrast($theme), 0.2) !important;}
67
- }
68
-
69
- &[color="deep-purple"] {
70
- input[type="radio"]:active {border-color: getDeepPurple($theme);}
71
- input[type="radio"]:checked {
72
- border-color: getDeepPurple($theme);
73
- }
74
- input[type="radio"]:checked::after {background-color: getDeepPurple($theme);}
75
- .matcha-radio-container:hover {background-color: rgba(getDeepPurple($theme), 0.1);}
76
- .matcha-radio-container .ripple{background: rgba(getDeepPurpleContrast($theme), 0.2) !important;}
77
- }
78
-
79
- &[color="indigo"] {
80
- input[type="radio"]:active {border-color: getIndigo($theme);}
81
- input[type="radio"]:checked {
82
- border-color: getIndigo($theme);
83
- }
84
- input[type="radio"]:checked::after {background-color: getIndigo($theme);}
85
- .matcha-radio-container:hover {background-color: rgba(getIndigo($theme), 0.1);}
86
- .matcha-radio-container .ripple{background: rgba(getIndigoContrast($theme), 0.2) !important;}
87
- }
88
-
89
- &[color="blue"] {
90
- input[type="radio"]:active {border-color: getBlue($theme);}
91
- input[type="radio"]:checked {
92
- border-color: getBlue($theme);
93
- }
94
- input[type="radio"]:checked::after {background-color: getBlue($theme);}
95
- .matcha-radio-container:hover {background-color: rgba(getBlue($theme), 0.1);}
96
- .matcha-radio-container .ripple{background: rgba(getBlueContrast($theme), 0.2) !important;}
97
- }
98
-
99
- &[color="light-blue"] {
100
- input[type="radio"]:active {border-color: getLightBlue($theme);}
101
- input[type="radio"]:checked {
102
- border-color: getLightBlue($theme);
103
- }
104
- input[type="radio"]:checked::after {background-color: getLightBlue($theme);}
105
- .matcha-radio-container:hover {background-color: rgba(getLightBlue($theme), 0.1);}
106
- .matcha-radio-container .ripple{background: rgba(getLightBlueContrast($theme), 0.2) !important;}
107
- }
108
-
109
- &[color="cyan"] {
110
- input[type="radio"]:active {border-color: getCyan($theme);}
111
- input[type="radio"]:checked {
112
- border-color: getCyan($theme);
113
- }
114
- input[type="radio"]:checked::after {background-color: getCyan($theme);}
115
- .matcha-radio-container:hover {background-color: rgba(getCyan($theme), 0.1);}
116
- .matcha-radio-container .ripple{background: rgba(getCyanContrast($theme), 0.2) !important;}
117
- }
118
-
119
- &[color="teal"] {
120
- input[type="radio"]:active {border-color: getTeal($theme);}
121
- input[type="radio"]:checked {
122
- border-color: getTeal($theme);
123
- }
124
- input[type="radio"]:checked::after {background-color: getTeal($theme);}
125
- .matcha-radio-container:hover {background-color: rgba(getTeal($theme), 0.1);}
126
- .matcha-radio-container .ripple{background: rgba(getTealContrast($theme), 0.2) !important;}
127
- }
128
-
129
- &[color="green"] {
130
- input[type="radio"]:active {border-color: getGreen($theme);}
131
- input[type="radio"]:checked {
132
- border-color: getGreen($theme);
133
- }
134
- input[type="radio"]:checked::after {background-color: getGreen($theme);}
135
- .matcha-radio-container:hover {background-color: rgba(getGreen($theme), 0.1);}
136
- .matcha-radio-container .ripple{background: rgba(getGreenContrast($theme), 0.2) !important;}
137
- }
138
-
139
- &[color="light-green"] {
140
- input[type="radio"]:active {border-color: getLightGreen($theme);}
141
- input[type="radio"]:checked {
142
- border-color: getLightGreen($theme);
143
- }
144
- input[type="radio"]:checked::after {background-color: getLightGreen($theme);}
145
- .matcha-radio-container:hover {background-color: rgba(getLightGreen($theme), 0.1);}
146
- .matcha-radio-container .ripple{background: rgba(getLightGreenContrast($theme), 0.2) !important;}
147
- }
148
-
149
- &[color="lime"] {
150
- input[type="radio"]:active {border-color: getLime($theme);}
151
- input[type="radio"]:checked {
152
- border-color: getLime($theme);
153
- }
154
- input[type="radio"]:checked::after {background-color: getLime($theme);}
155
- .matcha-radio-container:hover {background-color: rgba(getLime($theme), 0.1);}
156
- .matcha-radio-container .ripple{background: rgba(getLimeContrast($theme), 0.2) !important;}
157
- }
158
-
159
- &[color="yellow"] {
160
- input[type="radio"]:active {border-color: getYellow($theme);}
161
- input[type="radio"]:checked {
162
- border-color: getYellow($theme);
163
- }
164
- input[type="radio"]:checked::after {background-color: getYellow($theme);}
165
- .matcha-radio-container:hover {background-color: rgba(getYellow($theme), 0.1);}
166
- .matcha-radio-container .ripple{background: rgba(getYellowContrast($theme), 0.2) !important;}
167
- }
168
-
169
- &[color="amber"] {
170
- input[type="radio"]:active {border-color: getAmber($theme);}
171
- input[type="radio"]:checked {
172
- border-color: getAmber($theme);
173
- }
174
- input[type="radio"]:checked::after {background-color: getAmber($theme);}
175
- .matcha-radio-container:hover {background-color: rgba(getAmber($theme), 0.1);}
176
- .matcha-radio-container .ripple{background: rgba(getAmberContrast($theme), 0.2) !important;}
177
- }
178
-
179
- &[color="orange"] {
180
- input[type="radio"]:active {border-color: getOrange($theme);}
181
- input[type="radio"]:checked {
182
- border-color: getOrange($theme);
183
- }
184
- input[type="radio"]:checked::after {background-color: getOrange($theme);}
185
- .matcha-radio-container:hover {background-color: rgba(getOrange($theme), 0.1);}
186
- .matcha-radio-container .ripple{background: rgba(getOrangeContrast($theme), 0.2) !important;}
187
- }
188
-
189
- &[color="deep-orange"] {
190
- input[type="radio"]:active {border-color: getDeepOrange($theme);}
191
- input[type="radio"]:checked {
192
- border-color: getDeepOrange($theme);
193
- }
194
- input[type="radio"]:checked::after {background-color: getDeepOrange($theme);}
195
- .matcha-radio-container:hover {background-color: rgba(getDeepOrange($theme), 0.1);}
196
- .matcha-radio-container .ripple{background: rgba(getDeepOrangeContrast($theme), 0.2) !important;}
197
- }
198
-
199
- &[color="brown"] {
200
- input[type="radio"]:active {border-color: getBrown($theme);}
201
- input[type="radio"]:checked {
202
- border-color: getBrown($theme);
203
- }
204
- input[type="radio"]:checked::after {background-color: getBrown($theme);}
205
- .matcha-radio-container:hover {background-color: rgba(getBrown($theme), 0.1);}
206
- .matcha-radio-container .ripple{background: rgba(getBrownContrast($theme), 0.2) !important;}
207
- }
208
-
209
- &[color="grey"] {
210
- input[type="radio"]:active {border-color: getGrey($theme);}
211
- input[type="radio"]:checked {
212
- border-color: getGrey($theme);
213
- }
214
- input[type="radio"]:checked::after {background-color: getGrey($theme);}
215
- .matcha-radio-container:hover {background-color: rgba(getGrey($theme), 0.1);}
216
- .matcha-radio-container .ripple{background: rgba(getGreyContrast($theme), 0.2) !important;}
217
- }
218
-
219
- &[color="blue-grey"] {
220
- input[type="radio"]:active {border-color: getBlueGrey($theme);}
221
- input[type="radio"]:checked {
222
- border-color: getBlueGrey($theme);
223
- }
224
- input[type="radio"]:checked::after {background-color: getBlueGrey($theme);}
225
- .matcha-radio-container:hover {background-color: rgba(getBlueGrey($theme), 0.1);}
226
- .matcha-radio-container .ripple{background: rgba(getBlueGreyContrast($theme), 0.2) !important;}
227
- }
228
-
229
- // primary
230
- &[color="primary"] {
231
- input[type="radio"]:active {border-color: getPrimary($theme);}
232
- input[type="radio"]:checked {
233
- border-color: getPrimary($theme);
234
- }
235
- input[type="radio"]:checked::after {background-color: getPrimary($theme);}
236
- .matcha-radio-container:hover {background-color: rgba(getPrimary($theme), 0.1);}
237
- .matcha-radio-container .ripple{background: rgba(getPrimaryContrast($theme), 0.2) !important;}
238
- }
239
-
240
- // accent
241
- &[color="accent"] {
242
- input[type="radio"]:active {border-color: getAccent($theme);}
243
- input[type="radio"]:checked {
244
- border-color: getAccent($theme);
245
- }
246
- input[type="radio"]:checked::after {background-color: getAccent($theme);}
247
- .matcha-radio-container:hover {background-color: rgba(getAccent($theme), 0.1);}
248
- .matcha-radio-container .ripple{background: rgba(getAccentContrast($theme), 0.2) !important;}
249
- }
250
-
251
- // warn
252
- &[color="warn"] {
253
- input[type="radio"]:active {border-color: getWarn($theme);}
254
- input[type="radio"]:checked {
255
- border-color: getWarn($theme);
256
- }
257
- input[type="radio"]:checked::after {background-color: getWarn($theme);}
258
- .matcha-radio-container:hover {background-color: rgba(getWarn($theme), 0.1);}
259
- .matcha-radio-container .ripple{background: rgba(getWarnContrast($theme), 0.2) !important;}
260
- }
261
-
262
- // disabled
263
- &[disabled] {
264
- input[type="radio"] {
265
- border-color: getGrey($theme);
266
- }
267
- }
268
-
269
- .matcha-radio-label {
270
- color: getGrey($theme);
271
- }
272
- }
273
- }
274
-
275
- matcha-radio {
276
- display: inline-flex;
277
- align-items: center;
278
- gap: 8px;
279
- cursor: pointer;
280
-
281
- input[type="radio"] {
282
- appearance: none;
283
- -webkit-appearance: none;
284
- width: 18px;
285
- height: 18px;
286
- padding: 0;
287
- border-radius: 50%;
288
- border-width: 2px;
289
- border-style: solid;
290
- outline: none;
291
- cursor: pointer;
292
- position: relative;
293
- transition: all 0.2s ease;
294
-
295
- &:checked {
296
- &::after {
297
- content: '';
298
- position: absolute;
299
- left: 3px;
300
- top: 3px;
301
- width: 8px;
302
- height: 8px;
303
- border-radius: 50%;
304
- }
305
- }
306
-
307
- &:disabled {
308
- cursor: not-allowed;
309
- }
310
-
311
- &:focus {
312
- }
313
- }
314
-
315
- .matcha-radio-label {
316
- font-size: 14px;
317
- user-select: none;
318
- cursor: pointer;
319
- }
320
-
321
- &[disabled] {
322
- cursor: not-allowed;
323
- opacity: 0.6;
324
-
325
- input[type="radio"] {
326
- border-width: 2px;
327
- border-style: solid;
328
- }
329
-
330
- .matcha-radio-label {
331
- cursor: not-allowed;
332
- }
333
- }
334
- }
335
-