@inchurch/matcha-theme 22.5.2 → 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.
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
.paginator-nav-button,
|
|
102
102
|
.page-button,
|
|
103
103
|
.paginator-progress__segment,
|
|
104
|
-
.paginator-
|
|
104
|
+
.paginator-jump__field,
|
|
105
105
|
.page-size-selector {
|
|
106
106
|
pointer-events: none;
|
|
107
107
|
opacity: var(--matcha-opacity-secondary, 0.54);
|
|
@@ -297,27 +297,19 @@
|
|
|
297
297
|
white-space: nowrap;
|
|
298
298
|
}
|
|
299
299
|
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
border-radius: var(--matcha-radius-md, 4px);
|
|
307
|
-
color: var(--matcha-color-text-primary);
|
|
308
|
-
font-family: var(--matcha-font-family);
|
|
309
|
-
font-size: var(--matcha-text-body-md, 14px);
|
|
310
|
-
text-align: center;
|
|
311
|
-
outline: none;
|
|
300
|
+
// Chrome (borda/bg/foco) agora vem do próprio matcha-field — só controlamos
|
|
301
|
+
// a largura compacta (o field é width:100% por padrão) e cosméticos do
|
|
302
|
+
// <input> nativo renderizado dentro dele (compat visual com o canon anterior).
|
|
303
|
+
// 64px = mesma largura do page-size selector ao lado (matcha-field size="sm").
|
|
304
|
+
.paginator-jump__field {
|
|
305
|
+
width: 64px;
|
|
312
306
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
307
|
+
input[type="number"] {
|
|
308
|
+
text-align: center;
|
|
309
|
+
-moz-appearance: textfield;
|
|
316
310
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
|
|
320
|
-
outline-offset: 0;
|
|
311
|
+
&::-webkit-outer-spin-button,
|
|
312
|
+
&::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
321
313
|
}
|
|
322
314
|
}
|
|
323
315
|
|
|
@@ -541,7 +533,7 @@
|
|
|
541
533
|
}
|
|
542
534
|
|
|
543
535
|
// Page-jump input mobile: bigger pra targets touch.
|
|
544
|
-
.paginator-
|
|
536
|
+
.paginator-jump__field {
|
|
545
537
|
height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-050, 4px)); // 44
|
|
546
538
|
width: var(--matcha-space-1000, 80px);
|
|
547
539
|
font-size: var(--matcha-text-body-md, 14px);
|
|
@@ -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,
|
|
@@ -290,7 +290,10 @@
|
|
|
290
290
|
// ── Column width hints (aplicar em <th> — <td> herda pela coluna) ─────
|
|
291
291
|
thead th,
|
|
292
292
|
tbody td {
|
|
293
|
-
|
|
293
|
+
// min-width igual ao width — sem isso, a regra base thead th/tbody td
|
|
294
|
+
// (min-width:120px) vence e a coluna nunca encolhe pro valor pretendido
|
|
295
|
+
// (mesmo bug achado e corrigido em .col-actions).
|
|
296
|
+
&.col-checkbox { width: var(--matcha-table-col-checkbox-width); min-width: var(--matcha-table-col-checkbox-width); text-align: center; }
|
|
294
297
|
&.col-id { width: var(--matcha-table-col-id-width); }
|
|
295
298
|
&.col-narrow { width: var(--matcha-table-col-narrow-width); }
|
|
296
299
|
&.col-medium { width: var(--matcha-table-col-medium-width); }
|