@inchurch/matcha-theme 21.3.3 → 21.4.0

package/abstracts/_colors.scss

@@ -147,6 +147,13 @@
 .color-label        { color: var(--matcha-color-text-label) !important; }
 .color-placeholder  { color: var(--matcha-color-text-placeholder) !important; }
 
+// Papéis de TEXTO semânticos (o gerador acima cobre fg/hint/label/placeholder,
+// mas NÃO os text-*). Consumidos amplamente nos templates do painel.
+.color-text-primary   { color: var(--matcha-color-text-primary) !important; }
+.color-text-secondary { color: var(--matcha-color-text-secondary) !important; }
+.color-text-muted     { color: var(--matcha-color-text-muted) !important; }
+.color-text-hint      { color: var(--matcha-color-text-hint) !important; }
+
 .color-unset {
     color: unset;
 }

package/base/_reset.scss

@@ -352,6 +352,19 @@ How to use
     word-break: break-all
 }
 
+// Helpers pontuais migrados do matcha-core (DSV3): matcha-core é só a grade
+// gerada; helpers escritos à mão vivem aqui na base (junto de .word-break etc.).
+// (.break-word não migra — use .word-break acima, mesma regra.)
+.overflow-wrap-anywhere { overflow-wrap: anywhere; }
+.font-inherit           { font-family: inherit; }
+.font-italic            { font-style: italic; }
+.tabular-nums           { font-variant-numeric: tabular-nums; }
+.user-select-none       { -webkit-user-select: none; user-select: none; }
+.scrollbar-none {
+    scrollbar-width: none;
+    &::-webkit-scrollbar { display: none; }
+}
+
 // -----------------------------------------------------------------------------------------------------
 // @ Letter spacing helpers
 // -----------------------------------------------------------------------------------------------------

package/components/matcha-table.scss

@@ -17,7 +17,7 @@
 // Helpers CSS-only:
 //   td.numeric  → tabular-nums
 //   td.truncate → ellipsis (text overflow)
-//   td[data-alinhamento] / td.text-{center,right} → alinhamento
+//   td[data-align] → alinhamento (data-alinhamento / td.text-{center,right} deprecated)
 //   tr.equal/.plus/.minus → variant semantic accent (cor via CSS var)
 //   tr.child-item → indent + accent esmaecido
 //   tr.is-selected → highlight
@@ -156,9 +156,10 @@
       border-bottom: var(--matcha-table-border-header) solid
         var(--matcha-table-border-color);
 
-      // Alinhamento — aceita data-attr canon DSV3 + utility classes legacy
-      &[data-alinhamento="center"], &.text-center { text-align: center; }
-      &[data-alinhamento="right"],  &.text-right  { text-align: right;  }
+      // Alinhamento — data-align é o canon DSV3; data-alinhamento + utility
+      // classes seguem aceitos (deprecated, remoção em ciclo futuro)
+      &[data-align="center"], &[data-alinhamento="center"], &.text-center { text-align: center; }
+      &[data-align="right"],  &[data-alinhamento="right"],  &.text-right  { text-align: right;  }
 
       // ── Sortable hint ([matcha-table-sortable] directive seta os attrs) ──
       &[data-sortable] {
@@ -218,7 +219,7 @@
         }
 
         // Header right-aligned com sort — chevron vem ANTES do texto (canon).
-        &[data-alinhamento="right"], &.text-right {
+        &[data-align="right"], &[data-alinhamento="right"], &.text-right {
           padding-right: var(--matcha-table-cell-padding-x-right);
           padding-left: calc(var(--matcha-table-cell-padding-x-left) +
                              var(--matcha-table-sort-icon-size));
@@ -255,8 +256,8 @@
         var(--matcha-table-border-color);
       transition: background-color var(--matcha-table-transition-duration) linear;
 
-      &[data-alinhamento="center"], &.text-center { text-align: center; }
-      &[data-alinhamento="right"],  &.text-right  { text-align: right;  }
+      &[data-align="center"], &[data-alinhamento="center"], &.text-center { text-align: center; }
+      &[data-align="right"],  &[data-alinhamento="right"],  &.text-right  { text-align: right;  }
 
       // Helper: tabular-nums (alinha decimais)
       &[data-numeric], &.numeric {

package/components/matcha-tree-view.scss

@@ -80,6 +80,51 @@ matcha-tree-view-item {
     // height auto — se ajusta ao row
 }
 
+// ── Guias de conector (modo organograma) — render quando [guides] é passado ──
+// Cada célula (largura = indentStep, inline) desenha a linha vertical do ancestral
+// (data-guide=line|tee) e/ou o cotovelo do nó (tee ├ / ell └). Linha via
+// --matcha-tree-view-guide-color (theme-aware, default = surface-border). As
+// verticais transbordam o padding-block da row (--_pad) p/ emendar entre rows —
+// use gap:0 no container quando quiser linhas 100% contínuas.
+.matcha-tree-view-item__guides {
+    flex:       none;
+    align-self: stretch;
+    display:    flex;
+}
+.matcha-tree-view-item__guide {
+    --_guide: var(--matcha-tree-view-guide-color, var(--matcha-color-surface-border));
+    --_pad:   var(--matcha-space-100, 8px);
+    position: relative;
+    flex:     none;
+
+    // Linha vertical no centro — 'line'/'tee' atravessam; 'ell' (último) para no centro.
+    &[data-guide="line"]::before,
+    &[data-guide="tee"]::before,
+    &[data-guide="ell"]::before {
+        content:    "";
+        position:   absolute;
+        left:       50%;
+        top:        calc(-1 * var(--_pad));
+        width:      1px;
+        background: var(--_guide);
+    }
+    &[data-guide="line"]::before,
+    &[data-guide="tee"]::before { bottom: calc(-1 * var(--_pad)); }
+    &[data-guide="ell"]::before { height: calc(50% + var(--_pad)); }
+
+    // Cotovelo horizontal (centro → direita, na metade da altura) — 'tee'/'ell'.
+    &[data-guide="tee"]::after,
+    &[data-guide="ell"]::after {
+        content:    "";
+        position:   absolute;
+        top:        50%;
+        left:       50%;
+        right:      0;
+        height:     1px;
+        background: var(--_guide);
+    }
+}
+
 // ── Row — bg transparente por default; container .matcha-tree-view dá bg card
 .matcha-tree-view-item__row {
     flex:           1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "21.3.3",
+  "version": "21.4.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {

package/tokens/_color-tokens.scss

@@ -241,6 +241,19 @@ $matcha-color-tokens: (
   chart-series-3: (light: #ed6645, dark: #f5876b),
   chart-series-4: (light: #c28700, dark: #ffc93d),
   chart-series-5: (light: #008094, dark: #26c2d9),
+
+  // Chart contrast (texto sobre a série, AA ≥ 4.5 nos 2 modos) + alpha (fill 10%).
+  // Completam a paleta chart pra uso em pílula/badge/superfície (ex.: níveis da tree-view).
+  chart-series-1-contrast: (light: #ffffff,           dark: rgba(0, 0, 0, .87)),
+  chart-series-2-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
+  chart-series-3-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
+  chart-series-4-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
+  chart-series-5-contrast: (light: #ffffff,           dark: rgba(0, 0, 0, .87)),
+  chart-series-1-alpha:    (light: rgba(#615ce5, .1), dark: rgba(#8782f2, .1)),
+  chart-series-2-alpha:    (light: rgba(#42a147, .1), dark: rgba(#66ba6b, .1)),
+  chart-series-3-alpha:    (light: rgba(#ed6645, .1), dark: rgba(#f5876b, .1)),
+  chart-series-4-alpha:    (light: rgba(#c28700, .1), dark: rgba(#ffc93d, .1)),
+  chart-series-5-alpha:    (light: rgba(#008094, .1), dark: rgba(#26c2d9, .1)),
 );
 
 // ═══════════════════════════════════════════════════════════════════════════