@inchurch/matcha-theme 21.3.2 → 21.4.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.
- package/abstracts/_colors.scss +7 -0
- package/base/_reset.scss +13 -0
- package/components/matcha-autocomplete.scss +12 -0
- package/components/matcha-panel.scss +12 -0
- package/components/matcha-table.scss +8 -7
- package/components/matcha-tree-view.scss +45 -0
- package/package.json +1 -1
- package/tokens/_color-tokens.scss +13 -0
package/abstracts/_colors.scss
CHANGED
|
@@ -147,6 +147,13 @@
|
|
|
147
147
|
.color-label { color: var(--matcha-color-text-label) !important; }
|
|
148
148
|
.color-placeholder { color: var(--matcha-color-text-placeholder) !important; }
|
|
149
149
|
|
|
150
|
+
// Papéis de TEXTO semânticos (o gerador acima cobre fg/hint/label/placeholder,
|
|
151
|
+
// mas NÃO os text-*). Consumidos amplamente nos templates do painel.
|
|
152
|
+
.color-text-primary { color: var(--matcha-color-text-primary) !important; }
|
|
153
|
+
.color-text-secondary { color: var(--matcha-color-text-secondary) !important; }
|
|
154
|
+
.color-text-muted { color: var(--matcha-color-text-muted) !important; }
|
|
155
|
+
.color-text-hint { color: var(--matcha-color-text-hint) !important; }
|
|
156
|
+
|
|
150
157
|
.color-unset {
|
|
151
158
|
color: unset;
|
|
152
159
|
}
|
package/base/_reset.scss
CHANGED
|
@@ -352,6 +352,19 @@ How to use
|
|
|
352
352
|
word-break: break-all
|
|
353
353
|
}
|
|
354
354
|
|
|
355
|
+
// Helpers pontuais migrados do matcha-core (DSV3): matcha-core é só a grade
|
|
356
|
+
// gerada; helpers escritos à mão vivem aqui na base (junto de .word-break etc.).
|
|
357
|
+
// (.break-word não migra — use .word-break acima, mesma regra.)
|
|
358
|
+
.overflow-wrap-anywhere { overflow-wrap: anywhere; }
|
|
359
|
+
.font-inherit { font-family: inherit; }
|
|
360
|
+
.font-italic { font-style: italic; }
|
|
361
|
+
.tabular-nums { font-variant-numeric: tabular-nums; }
|
|
362
|
+
.user-select-none { -webkit-user-select: none; user-select: none; }
|
|
363
|
+
.scrollbar-none {
|
|
364
|
+
scrollbar-width: none;
|
|
365
|
+
&::-webkit-scrollbar { display: none; }
|
|
366
|
+
}
|
|
367
|
+
|
|
355
368
|
// -----------------------------------------------------------------------------------------------------
|
|
356
369
|
// @ Letter spacing helpers
|
|
357
370
|
// -----------------------------------------------------------------------------------------------------
|
|
@@ -114,6 +114,18 @@ matcha-autocomplete {
|
|
|
114
114
|
position: relative;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
+
// ── Chevron ▾ vs. botão × : dividem o canto direito ───────────────────────────
|
|
118
|
+
// Em matcha-field type="autocomplete" o input recebe matchaClearButton (× genérico)
|
|
119
|
+
// E o chevron ▾ desta diretiva — ambos ancorados à direita. Ao digitar/selecionar,
|
|
120
|
+
// o matchaClearButton adiciona .matcha-clear-button--visible; nesse caso escondemos
|
|
121
|
+
// o chevron pra ele não ficar por baixo do ×. Reage sozinho via :has() (sem tocar a
|
|
122
|
+
// lógica JS, preservando o uso standalone do autocomplete). !important vence o
|
|
123
|
+
// display inline que a diretiva seta no chevron (injetado via Renderer2 — mesmo
|
|
124
|
+
// motivo dos !important em matcha-form-field).
|
|
125
|
+
.matcha-form-field:has(.matcha-clear-button--visible) .matcha-autocomplete-chevron {
|
|
126
|
+
display: none !important;
|
|
127
|
+
}
|
|
128
|
+
|
|
117
129
|
// ── Disabled state ──
|
|
118
130
|
.matcha-autocomplete-disabled {
|
|
119
131
|
pointer-events: none;
|
|
@@ -67,6 +67,18 @@
|
|
|
67
67
|
flex: 1;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
+
// Painéis de menu nunca rolam na horizontal. Como .matcha-panel declara só
|
|
71
|
+
// `overflow-y: auto`, o `overflow-x` computa como `auto` (regra CSS: um eixo
|
|
72
|
+
// visible + o outro não-visible → o visible vira auto). Numa lista longa (scroll
|
|
73
|
+
// vertical) o scrollbar vertical reduz a largura útil e os itens em `nowrap`
|
|
74
|
+
// induzem um scrollbar horizontal fantasma. Fixar overflow-x hidden elimina a
|
|
75
|
+
// barra sem cortar texto (fica sob o padding do item). Escopado a menu porque
|
|
76
|
+
// submenus são portados pro <body> (não são descendentes) — logo não são clipados;
|
|
77
|
+
// select/autocomplete/calendar ficam intactos.
|
|
78
|
+
.matcha-panel:has(> .matcha-menu-content) {
|
|
79
|
+
overflow-x: hidden;
|
|
80
|
+
}
|
|
81
|
+
|
|
70
82
|
// Quando o painel envolve um componente que já carrega surface + shadow + radius próprios
|
|
71
83
|
// (ex: matcha-calendar, matcha-time-panel), o panel deve ser transparente e servir
|
|
72
84
|
// apenas de container de posicionamento — evita "duplicar" visual do cartão.
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
// Helpers CSS-only:
|
|
18
18
|
// td.numeric → tabular-nums
|
|
19
19
|
// td.truncate → ellipsis (text overflow)
|
|
20
|
-
// td[data-
|
|
20
|
+
// td[data-align] → alinhamento (data-alinhamento / td.text-{center,right} deprecated)
|
|
21
21
|
// tr.equal/.plus/.minus → variant semantic accent (cor via CSS var)
|
|
22
22
|
// tr.child-item → indent + accent esmaecido
|
|
23
23
|
// tr.is-selected → highlight
|
|
@@ -156,9 +156,10 @@
|
|
|
156
156
|
border-bottom: var(--matcha-table-border-header) solid
|
|
157
157
|
var(--matcha-table-border-color);
|
|
158
158
|
|
|
159
|
-
// Alinhamento —
|
|
160
|
-
|
|
161
|
-
&[data-alinhamento="
|
|
159
|
+
// Alinhamento — data-align é o canon DSV3; data-alinhamento + utility
|
|
160
|
+
// classes seguem aceitos (deprecated, remoção em ciclo futuro)
|
|
161
|
+
&[data-align="center"], &[data-alinhamento="center"], &.text-center { text-align: center; }
|
|
162
|
+
&[data-align="right"], &[data-alinhamento="right"], &.text-right { text-align: right; }
|
|
162
163
|
|
|
163
164
|
// ── Sortable hint ([matcha-table-sortable] directive seta os attrs) ──
|
|
164
165
|
&[data-sortable] {
|
|
@@ -218,7 +219,7 @@
|
|
|
218
219
|
}
|
|
219
220
|
|
|
220
221
|
// Header right-aligned com sort — chevron vem ANTES do texto (canon).
|
|
221
|
-
&[data-alinhamento="right"], &.text-right {
|
|
222
|
+
&[data-align="right"], &[data-alinhamento="right"], &.text-right {
|
|
222
223
|
padding-right: var(--matcha-table-cell-padding-x-right);
|
|
223
224
|
padding-left: calc(var(--matcha-table-cell-padding-x-left) +
|
|
224
225
|
var(--matcha-table-sort-icon-size));
|
|
@@ -255,8 +256,8 @@
|
|
|
255
256
|
var(--matcha-table-border-color);
|
|
256
257
|
transition: background-color var(--matcha-table-transition-duration) linear;
|
|
257
258
|
|
|
258
|
-
&[data-alinhamento="center"], &.text-center { text-align: center; }
|
|
259
|
-
&[data-alinhamento="right"], &.text-right { text-align: right; }
|
|
259
|
+
&[data-align="center"], &[data-alinhamento="center"], &.text-center { text-align: center; }
|
|
260
|
+
&[data-align="right"], &[data-alinhamento="right"], &.text-right { text-align: right; }
|
|
260
261
|
|
|
261
262
|
// Helper: tabular-nums (alinha decimais)
|
|
262
263
|
&[data-numeric], &.numeric {
|
|
@@ -80,6 +80,51 @@ matcha-tree-view-item {
|
|
|
80
80
|
// height auto — se ajusta ao row
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
+
// ── Guias de conector (modo organograma) — render quando [guides] é passado ──
|
|
84
|
+
// Cada célula (largura = indentStep, inline) desenha a linha vertical do ancestral
|
|
85
|
+
// (data-guide=line|tee) e/ou o cotovelo do nó (tee ├ / ell └). Linha via
|
|
86
|
+
// --matcha-tree-view-guide-color (theme-aware, default = surface-border). As
|
|
87
|
+
// verticais transbordam o padding-block da row (--_pad) p/ emendar entre rows —
|
|
88
|
+
// use gap:0 no container quando quiser linhas 100% contínuas.
|
|
89
|
+
.matcha-tree-view-item__guides {
|
|
90
|
+
flex: none;
|
|
91
|
+
align-self: stretch;
|
|
92
|
+
display: flex;
|
|
93
|
+
}
|
|
94
|
+
.matcha-tree-view-item__guide {
|
|
95
|
+
--_guide: var(--matcha-tree-view-guide-color, var(--matcha-color-surface-border));
|
|
96
|
+
--_pad: var(--matcha-space-100, 8px);
|
|
97
|
+
position: relative;
|
|
98
|
+
flex: none;
|
|
99
|
+
|
|
100
|
+
// Linha vertical no centro — 'line'/'tee' atravessam; 'ell' (último) para no centro.
|
|
101
|
+
&[data-guide="line"]::before,
|
|
102
|
+
&[data-guide="tee"]::before,
|
|
103
|
+
&[data-guide="ell"]::before {
|
|
104
|
+
content: "";
|
|
105
|
+
position: absolute;
|
|
106
|
+
left: 50%;
|
|
107
|
+
top: calc(-1 * var(--_pad));
|
|
108
|
+
width: 1px;
|
|
109
|
+
background: var(--_guide);
|
|
110
|
+
}
|
|
111
|
+
&[data-guide="line"]::before,
|
|
112
|
+
&[data-guide="tee"]::before { bottom: calc(-1 * var(--_pad)); }
|
|
113
|
+
&[data-guide="ell"]::before { height: calc(50% + var(--_pad)); }
|
|
114
|
+
|
|
115
|
+
// Cotovelo horizontal (centro → direita, na metade da altura) — 'tee'/'ell'.
|
|
116
|
+
&[data-guide="tee"]::after,
|
|
117
|
+
&[data-guide="ell"]::after {
|
|
118
|
+
content: "";
|
|
119
|
+
position: absolute;
|
|
120
|
+
top: 50%;
|
|
121
|
+
left: 50%;
|
|
122
|
+
right: 0;
|
|
123
|
+
height: 1px;
|
|
124
|
+
background: var(--_guide);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
83
128
|
// ── Row — bg transparente por default; container .matcha-tree-view dá bg card
|
|
84
129
|
.matcha-tree-view-item__row {
|
|
85
130
|
flex: 1;
|
package/package.json
CHANGED
|
@@ -241,6 +241,19 @@ $matcha-color-tokens: (
|
|
|
241
241
|
chart-series-3: (light: #ed6645, dark: #f5876b),
|
|
242
242
|
chart-series-4: (light: #c28700, dark: #ffc93d),
|
|
243
243
|
chart-series-5: (light: #008094, dark: #26c2d9),
|
|
244
|
+
|
|
245
|
+
// Chart contrast (texto sobre a série, AA ≥ 4.5 nos 2 modos) + alpha (fill 10%).
|
|
246
|
+
// Completam a paleta chart pra uso em pílula/badge/superfície (ex.: níveis da tree-view).
|
|
247
|
+
chart-series-1-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
|
|
248
|
+
chart-series-2-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
|
|
249
|
+
chart-series-3-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
|
|
250
|
+
chart-series-4-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
|
|
251
|
+
chart-series-5-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
|
|
252
|
+
chart-series-1-alpha: (light: rgba(#615ce5, .1), dark: rgba(#8782f2, .1)),
|
|
253
|
+
chart-series-2-alpha: (light: rgba(#42a147, .1), dark: rgba(#66ba6b, .1)),
|
|
254
|
+
chart-series-3-alpha: (light: rgba(#ed6645, .1), dark: rgba(#f5876b, .1)),
|
|
255
|
+
chart-series-4-alpha: (light: rgba(#c28700, .1), dark: rgba(#ffc93d, .1)),
|
|
256
|
+
chart-series-5-alpha: (light: rgba(#008094, .1), dark: rgba(#26c2d9, .1)),
|
|
244
257
|
);
|
|
245
258
|
|
|
246
259
|
// ═══════════════════════════════════════════════════════════════════════════
|