@inchurch/matcha-theme 22.5.3 → 22.5.4
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-radio.scss +42 -37
- package/package.json +1 -1
|
@@ -4,9 +4,19 @@
|
|
|
4
4
|
// Estrutura visual (1:1 com Figma):
|
|
5
5
|
// .matcha-radio-wrapper (label) — flex row + gap 8px
|
|
6
6
|
// .matcha-radio-touch (span) — 36×36 pillshape, state-layer, hover bg
|
|
7
|
-
// .matcha-radio-input (input radio) — 18×18 native, dot
|
|
7
|
+
// .matcha-radio-input (input radio) — 18×18 native, ring+dot via box-shadow inset
|
|
8
8
|
// .matcha-radio-text (span) — coluna label + desc + hint
|
|
9
9
|
//
|
|
10
|
+
// Ring/dot via 3 camadas de box-shadow inset (anel 2px, gap --matcha-color-surface,
|
|
11
|
+
// dot central ~8×8) numa única caixa — não border + ::after posicionado. Duas
|
|
12
|
+
// caixas separadas (input + pseudo-elemento absolutamente posicionado) arredondam
|
|
13
|
+
// pixel de forma independente em escalas fracionadas de tela (ex.: 125%), o que
|
|
14
|
+
// descentralizava o dot ("zarolho"); box-shadow inset é uma pintura só, sempre
|
|
15
|
+
// simétrica em relação ao próprio elemento. Mesma técnica do master (getSurface),
|
|
16
|
+
// só trocando a cor fixa pelo token DSV3 --matcha-color-surface.
|
|
17
|
+
// (Camada do gap PRECISA ser opaca — "transparent" não oclui a camada de baixo,
|
|
18
|
+
// só deixa o dot vazar até a borda e vira bolão sólido.)
|
|
19
|
+
//
|
|
10
20
|
// Color system: accent (default) + 6 semânticas (primary/success/warn/danger/info).
|
|
11
21
|
// Paleta legacy Material 1 (red/pink/purple/blue/...) REMOVIDA — DSV3 não suporta.
|
|
12
22
|
// =============================================================================
|
|
@@ -90,21 +100,11 @@ matcha-radio:not([disabled]) .matcha-radio-touch:active::before { opacity: var(-
|
|
|
90
100
|
height: var(--matcha-radio-size, 18px);
|
|
91
101
|
padding: 0;
|
|
92
102
|
margin: 0;
|
|
93
|
-
border-width: 2px;
|
|
94
|
-
border-style: solid;
|
|
95
103
|
border-radius: 50%;
|
|
96
104
|
cursor: pointer;
|
|
97
105
|
position: relative;
|
|
98
106
|
box-sizing: border-box;
|
|
99
|
-
transition:
|
|
100
|
-
|
|
101
|
-
// Dot interno (checked) — 8×8 centralizado via inset
|
|
102
|
-
&:checked::after {
|
|
103
|
-
content: '';
|
|
104
|
-
position: absolute;
|
|
105
|
-
inset: 3px;
|
|
106
|
-
border-radius: 50%;
|
|
107
|
-
}
|
|
107
|
+
transition: box-shadow var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, ease);
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
// ── Coluna texto (label + description + hint) ────────────────────────────
|
|
@@ -177,14 +177,12 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
|
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
.matcha-radio-input {
|
|
180
|
-
|
|
180
|
+
box-shadow: 0 0 0 2px var(--matcha-color-text-label) inset;
|
|
181
181
|
|
|
182
182
|
&:checked {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
background-color: var(--matcha-color-accent);
|
|
187
|
-
}
|
|
183
|
+
box-shadow: 0 0 0 2px var(--matcha-color-accent) inset,
|
|
184
|
+
0 0 0 5px var(--matcha-color-surface) inset,
|
|
185
|
+
0 0 0 9px var(--matcha-color-accent) inset;
|
|
188
186
|
}
|
|
189
187
|
}
|
|
190
188
|
}
|
|
@@ -193,10 +191,11 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
|
|
|
193
191
|
&[color="primary"] {
|
|
194
192
|
.matcha-radio-touch { color: var(--matcha-color-primary); }
|
|
195
193
|
.matcha-radio-input {
|
|
196
|
-
|
|
194
|
+
box-shadow: 0 0 0 2px var(--matcha-color-text-label) inset;
|
|
197
195
|
&:checked {
|
|
198
|
-
|
|
199
|
-
|
|
196
|
+
box-shadow: 0 0 0 2px var(--matcha-color-primary) inset,
|
|
197
|
+
0 0 0 5px var(--matcha-color-surface) inset,
|
|
198
|
+
0 0 0 9px var(--matcha-color-primary) inset;
|
|
200
199
|
}
|
|
201
200
|
}
|
|
202
201
|
}
|
|
@@ -205,10 +204,11 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
|
|
|
205
204
|
&[color="success"] {
|
|
206
205
|
.matcha-radio-touch { color: var(--matcha-color-success); }
|
|
207
206
|
.matcha-radio-input {
|
|
208
|
-
|
|
207
|
+
box-shadow: 0 0 0 2px var(--matcha-color-text-label) inset;
|
|
209
208
|
&:checked {
|
|
210
|
-
|
|
211
|
-
|
|
209
|
+
box-shadow: 0 0 0 2px var(--matcha-color-success) inset,
|
|
210
|
+
0 0 0 5px var(--matcha-color-surface) inset,
|
|
211
|
+
0 0 0 9px var(--matcha-color-success) inset;
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
214
|
}
|
|
@@ -217,10 +217,11 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
|
|
|
217
217
|
&[color="warn"] {
|
|
218
218
|
.matcha-radio-touch { color: var(--matcha-color-warn); }
|
|
219
219
|
.matcha-radio-input {
|
|
220
|
-
|
|
220
|
+
box-shadow: 0 0 0 2px var(--matcha-color-text-label) inset;
|
|
221
221
|
&:checked {
|
|
222
|
-
|
|
223
|
-
|
|
222
|
+
box-shadow: 0 0 0 2px var(--matcha-color-warn) inset,
|
|
223
|
+
0 0 0 5px var(--matcha-color-surface) inset,
|
|
224
|
+
0 0 0 9px var(--matcha-color-warn) inset;
|
|
224
225
|
}
|
|
225
226
|
}
|
|
226
227
|
}
|
|
@@ -229,10 +230,11 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
|
|
|
229
230
|
&[color="danger"] {
|
|
230
231
|
.matcha-radio-touch { color: var(--matcha-color-danger); }
|
|
231
232
|
.matcha-radio-input {
|
|
232
|
-
|
|
233
|
+
box-shadow: 0 0 0 2px var(--matcha-color-text-label) inset;
|
|
233
234
|
&:checked {
|
|
234
|
-
|
|
235
|
-
|
|
235
|
+
box-shadow: 0 0 0 2px var(--matcha-color-danger) inset,
|
|
236
|
+
0 0 0 5px var(--matcha-color-surface) inset,
|
|
237
|
+
0 0 0 9px var(--matcha-color-danger) inset;
|
|
236
238
|
}
|
|
237
239
|
}
|
|
238
240
|
}
|
|
@@ -241,10 +243,11 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
|
|
|
241
243
|
&[color="info"] {
|
|
242
244
|
.matcha-radio-touch { color: var(--matcha-color-info); }
|
|
243
245
|
.matcha-radio-input {
|
|
244
|
-
|
|
246
|
+
box-shadow: 0 0 0 2px var(--matcha-color-text-label) inset;
|
|
245
247
|
&:checked {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
+
box-shadow: 0 0 0 2px var(--matcha-color-info) inset,
|
|
249
|
+
0 0 0 5px var(--matcha-color-surface) inset,
|
|
250
|
+
0 0 0 9px var(--matcha-color-info) inset;
|
|
248
251
|
}
|
|
249
252
|
}
|
|
250
253
|
}
|
|
@@ -253,10 +256,12 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
|
|
|
253
256
|
&.matcha-radio-error,
|
|
254
257
|
&[error="true"] {
|
|
255
258
|
.matcha-radio-input {
|
|
256
|
-
|
|
259
|
+
box-shadow: 0 0 0 2px var(--matcha-color-danger) inset !important;
|
|
257
260
|
|
|
258
|
-
&:checked
|
|
259
|
-
|
|
261
|
+
&:checked {
|
|
262
|
+
box-shadow: 0 0 0 2px var(--matcha-color-danger) inset,
|
|
263
|
+
0 0 0 5px var(--matcha-color-surface) inset,
|
|
264
|
+
0 0 0 9px var(--matcha-color-danger) inset !important;
|
|
260
265
|
}
|
|
261
266
|
}
|
|
262
267
|
}
|
|
@@ -266,7 +271,7 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
|
|
|
266
271
|
opacity: var(--matcha-opacity-option-disabled, 0.5);
|
|
267
272
|
|
|
268
273
|
.matcha-radio-input {
|
|
269
|
-
|
|
274
|
+
box-shadow: 0 0 0 2px var(--matcha-color-interaction-disabled-fg) inset;
|
|
270
275
|
}
|
|
271
276
|
|
|
272
277
|
.matcha-radio-label,
|