@inchurch/matcha-theme 20.278.0 → 21.0.0

package/components/matcha-tabs.scss

@@ -2,7 +2,7 @@
 
 @mixin _colorize-inactive-type-basic($theme, $color-functions) {
     &[inactivetype="basic"] {
-        @each $colorName, $colorFn in $color-functions {
+        @each $colorName in $color-functions {
             &[inactivecolor="#{'' + $colorName}"] {
                 .button-group matcha-tab-item {
 
@@ -10,11 +10,11 @@
                     a[matcha-button] {
                         &:not([active-item="true"]) {
                             background: var(--matcha-color-surface);
-                            color: call(#{$colorFn}, $theme);
+                            color: var(--matcha-color-#{$colorName});
                             box-shadow: 0 0 0 0px inset;
 
                             .ripple {
-                                background: call(#{$colorFn}Alpha, $theme); // ok: legacy ripple color token
+                                background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
                             }
                         }
                     }
@@ -43,7 +43,7 @@
 
         //disabled false
         &:not([disabled="true"]) {
-            @each $colorName, $colorFn in $color-functions {
+            @each $colorName in $color-functions {
                 &[inactivecolor="#{'' + $colorName}"] {
                     .button-group matcha-tab-item {
 
@@ -52,12 +52,12 @@
 
                             //botão não ativo
                             &:not([active-item="true"]) {
-                                color: call(#{$colorFn}, $theme);
+                                color: var(--matcha-color-#{$colorName});
                                 background: transparent;
-                                box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
+                                box-shadow: 0 0 0 2px var(--matcha-color-#{$colorName}) inset;
 
                                 .ripple {
-                                    background: call(#{$colorFn}Alpha, $theme); // ok: legacy ripple color token
+                                    background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
                                 }
                             }
                         }
@@ -87,19 +87,19 @@
 
 @mixin _colorize-inactive-type-alpha($theme, $color-functions) {
     &[inactivetype="alpha"] {
-        @each $colorName, $colorFn in $color-functions {
+        @each $colorName in $color-functions {
             &[inactivecolor="#{'' + $colorName}"] {
                 .button-group matcha-tab-item {
 
                     button[matcha-button],
                     a[matcha-button] {
                         &:not([active-item="true"]) {
-                            color: call(#{$colorFn}, $theme);
-                            background: call(#{$colorFn}Alpha, $theme);
+                            color: var(--matcha-color-#{$colorName});
+                            background: var(--matcha-color-#{$colorName}-alpha);
                             box-shadow: 0 0 0 0px;
 
                             .ripple {
-                                background: call(#{$colorFn}ContrastAlpha, $theme); // ok: legacy ripple color token
+                                background: var(--matcha-color-#{$colorName}-contrast-alpha); // ok: legacy ripple color token
                             }
                         }
                     }
@@ -128,7 +128,7 @@
 @mixin _colorize-inactive-type-link($theme, $color-functions) {
 
     &[inactivetype="link"] {
-        @each $colorName, $colorFn in $color-functions {
+        @each $colorName in $color-functions {
             &[inactivecolor="#{'' + $colorName}"] {
                 .button-group matcha-tab-item {
 
@@ -137,11 +137,11 @@
                         &:not([active-item="true"]) {
 
                             background: transparent;
-                            color: call(#{$colorFn}, $theme);
+                            color: var(--matcha-color-#{$colorName});
                             box-shadow: 0 0 0 0px;
 
                             .ripple {
-                                background: call(#{$colorFn}Alpha, $theme); // ok: legacy ripple color token
+                                background: var(--matcha-color-#{$colorName}-alpha); // ok: legacy ripple color token
                             }
 
                         }
@@ -172,34 +172,11 @@
 
 
 @mixin matcha-tabs($theme) {
-    $color-functions: (
-        red: getRed,
-        pink: getPink,
-        purple: getPurple,
-        deep-purple: getDeepPurple,
-        indigo: getIndigo,
-        blue: getBlue,
-        light-blue: getLightBlue,
-        cyan: getCyan,
-        teal: getTeal,
-        green: getGreen,
-        light-green: getLightGreen,
-        lime: getLime,
-        yellow: getYellow,
-        amber: getAmber,
-        orange: getOrange,
-        deep-orange: getDeepOrange,
-        brown: getBrown,
-        grey: getGrey,
-        blue-grey: getBlueGrey,
-        primary: getPrimary,
-        accent: getAccent,
-        success: getSuccess,
-        warn: getWarn,
-        danger: getDanger,
-        info: getInfo,
-        disabled: getDisabled,
-    );
+    // Nomes de cor (semânticas + paleta). As cores vêm de var(--matcha-color-*)
+    // emitidas no tema — sem getRed/$theme compile-time. Value-preserving.
+    $color-functions: "red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal",
+        "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "grey", "blue-grey",
+        "primary", "accent", "success", "warn", "danger", "info", "disabled";
 
 matcha-tabs {
     display: flex;

package/components/matcha-tree-view.scss

@@ -25,6 +25,29 @@
     }
 }
 
+// ── Container data-driven (matcha-tree-view) + branches recursivos ──────────
+// O host <matcha-tree-view> reusa a classe .matcha-tree-view acima (tray + gap).
+// Cada nível é um <matcha-tree-branch> (drop container); a indentação é por item
+// (via [level] do tree-view-item), então os wrappers NÃO adicionam indent.
+matcha-tree-branch,
+.matcha-tree-view__children {
+    display:        flex;
+    flex-direction: column;
+    gap:            var(--matcha-space-050, 4px);
+    min-height:     2px; // alvo de drop mínimo quando o branch está vazio
+}
+
+.matcha-tree-view__node {
+    display: block;
+}
+
+// Feedback de rejeição na zona de reparenting (self-drop / tipo não aceito)
+.matcha-drop-zone-cannot-accept {
+    outline:        2px dashed var(--matcha-color-danger, #e5484d);
+    outline-offset: -2px;
+    border-radius:  var(--matcha-radius-md, 4px);
+}
+
 // ── Item host — flex row com indent dinâmico ────────────────────────────────
 matcha-tree-view-item {
     display:         flex;

package/layout/matcha-page-layout.scss

@@ -75,7 +75,7 @@
                             width: 100%;
                             padding: 16px 24px;
                             border-radius: 8px;
-                            background: getSurface($theme);
+                            background: var(--matcha-color-surface);
                             @include elevation(1);
                             button,
                             form {
@@ -175,7 +175,7 @@
                         }
                         > .toolbar {
                             // Theme
-                            border-bottom-color: getDisabled($theme);
+                            border-bottom-color: var(--matcha-color-disabled);
                             // Style
                             display: flex;
                             justify-content: flex-start;
@@ -330,10 +330,10 @@
                 .center {
                     .content-card {
                         @include elevation(1);
-                        background: getSurface($theme);
+                        background: var(--matcha-color-surface);
                         border-radius: 8px;
                         > .toolbar {
-                            border-bottom-color: getDisabled($theme);
+                            border-bottom-color: var(--matcha-color-disabled);
                         }
                     }
 
@@ -537,7 +537,7 @@
 
                     > .content {
                         // Theme
-                        background: getSurface($theme);
+                        background: var(--matcha-color-surface);
 
                         // Style
                         flex: 1 0 auto;
@@ -586,7 +586,7 @@
                     > .content {
                         > .center {
                             > .content {
-                                background: getSurface($theme);
+                                background: var(--matcha-color-surface);
                                 @include elevation(1);
                             }
                         }

package/main.scss

@@ -1,11 +1,13 @@
 // TOKENS
 @import "./tokens/animations-tokens";
 @import "./tokens/breakpoints-tokens";
-@import "./tokens/color-tokens";
+@import "./tokens/material-palette"; // paletas Material legadas ($mat-*, $blue-grey, …) — consumidas só pelo old API (palette/light-theme/dark-theme). A aposentar com o Track B.
 @import "./tokens/elevation-tokens";
 @import "./tokens/spacing-tokens";
 @import "./tokens/typography-tokens";
-@import "./tokens/css-custom-properties";
+@import "./tokens/color-tokens";          // cor — papéis por modo (synced do Figma via sync-tokens)
+@import "./tokens/static-tokens";         // não-cor (gerado de global.json) — mixin matcha-static-tokens()
+@import "./tokens/emit-tokens";           // emissão — mixin matcha-css-custom-properties() (consome color-tokens + static-tokens)
 @import "./tokens/primitives"; // matcha-primitives() — Camada 1: CSS vars de primitivas (--matcha-prim-*) em :root
 @import "./tokens/semantic-aliases"; // $matcha-prim-aliases-{light,dark} — Camada 2: token semântico → primitiva (rota clássica emite var)
 
@@ -100,12 +102,7 @@
 @import "./layout/matcha-page-layout.scss"; // matcha-page-layout-theme($theme)
 
 // VENDORS
-@import "./vendors/angular-editor.scss";
-@import "./vendors/angular-material-fixes.scss";
-@import "./vendors/calendar.scss";
 @import "./vendors/charts.scss";
-@import "./vendors/ng5-slider.scss";
-@import "./vendors/ngx-material-timepicker.scss";
 
 // ─── FONT LOADING — Manrope (SELF-HOSTED · zero dependência externa) ─────────
 // REGRA DE OURO: fontes self-hosted, nunca @import/<link> do Google Fonts.
@@ -144,23 +141,18 @@
     @include matcha-reset-typography($config);
 }
 
-@mixin matcha-components($theme) {
-    @include matcha-css-custom-properties($theme);
-
-    @include colors-classes-dynamic($theme);
-    @include colors-classes-static($theme);
-
-    @include elevation-theme($theme);
-
-    @include vendor-angular-editor($theme);
-    @include vendor-angular-material-fixes($theme);
-    @include vendor-calendar-theme($theme);
+// matcha-base — CSS estrutural/componentes, theme-AGNÓSTICO (consome var(--matcha-color-*)
+// e tokens; nenhuma cor compile-time após o Track B). Deve ser emitido UMA VEZ, GLOBAL
+// (fora de classe de tema) — ver src/app/app.theme.scss. A cor vem da classe de tema
+// (.theme-default-* / skin) via as CSS vars. Track B3.
+// matcha-base — estrutural theme-AGNÓSTICO (componentes + vendor-chart + base-typography).
+// 100% var(--matcha-*) — emitir 1× GLOBAL (ver app.theme.scss). NÃO inclui base-body-reset
+// (usa & p/ pintar bg/fg do elemento de tema → emitido por classe de tema).
+@mixin matcha-base($theme: ()) {
+    // API nova: chamável sem arg — matcha-base(). $theme é plumbing vestigial repassado
+    // aos component-mixins (todos var-based após a virada); default () permite call limpo.
     @include vendor-chart($theme);
-    @include vendor-ng-5-theme($theme);
-    @include vendor-ngx-material-timepicker($theme);
-
     @include base-typography-theme($theme);
-    @include base-body-reset-theme($theme);
 
     @include matcha-cards-theme($theme);
     @include matcha-horizontal-tree-theme($theme);
@@ -235,4 +227,14 @@
     @include matcha-flag($theme);
     @include matcha-emoji-theme($theme);
     @include matcha-page-layout-theme($theme);
-}
+}
+
+// matcha-components() — REMOVIDO no major (era o shim retrocompat @deprecated).
+// API nova (ver src/app/app.theme.scss):
+//   @include matcha-primitives();                       // :root primitivas
+//   @include matcha-base();                             // estrutural 1× global (agnóstico)
+//   @include colors-classes-dynamic();                  // classes utilitárias (inclui -static)
+//   .theme-X { @include matcha-css-custom-properties($is-dark);  // --matcha-color-*
+//              @include elevation-theme($is-dark);
+//              @include base-body-reset-theme();
+//              @include matcha-typography($config); }

package/package.json

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