@inchurch/matcha-theme 20.276.0 → 20.278.0

package/components/{matcha-uploader.scss → matcha-file-uploader.scss}

@@ -1,7 +1,7 @@
 @use "sass:map";
 
 // =============================================================================
-// matcha-uploader.scss — File upload component (matcha/file-upload no Figma DSV3)
+// matcha-file-uploader.scss — File upload component (matcha/file-uploader no Figma DSV3)
 //
 // 3 estados canon (16152:254):
 //   Estado=Dropzone  (16152:209) — área vazia com icon pill + title + hint + 2 botões
@@ -11,103 +11,106 @@
 // Width canon: 480px (component se adapta via max-width: 480px + width: 100%)
 // =============================================================================
 
-@mixin matcha-uploader-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
+@mixin matcha-file-uploader-theme($theme) {
 
   // ── Dropzone ──
-  .matcha-uploader-dropzone {
-    background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg, #{getBackground($theme)}));
-    border-color: var(--matcha-color-surface-border, #{getGrey($theme)});
+  .matcha-file-uploader-dropzone {
+    background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg));
+    border-color: var(--matcha-color-surface-border);
 
-    &.matcha-uploader-dragover {
-      background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-      border-color: var(--matcha-color-accent, #{getAccent($theme)});
+    &.matcha-file-uploader-dragover {
+      background: var(--matcha-color-accent-alpha);
+      border-color: var(--matcha-color-accent);
     }
 
-    &.matcha-uploader-disabled {
+    &.matcha-file-uploader-disabled {
       opacity: 0.5;
       cursor: not-allowed;
       pointer-events: none;
     }
   }
 
-  .matcha-uploader-dropzone__icon-pill {
+  .matcha-file-uploader-dropzone__icon-pill {
     background: var(--matcha-color-interaction-disabled-bg, #282c34);
-    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+    color: var(--matcha-color-text-secondary);
   }
 
-  .matcha-uploader-dropzone__title {
-    color: var(--matcha-color-text-primary, #{getForeground($theme)});
+  .matcha-file-uploader-dropzone__title {
+    color: var(--matcha-color-text-primary);
   }
 
-  .matcha-uploader-dropzone__optional {
+  .matcha-file-uploader-dropzone__optional {
     color: var(--matcha-color-interaction-disabled-fg, rgba(232, 234, 237, 0.38));
   }
 
-  .matcha-uploader-dropzone__hint {
-    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
-  }
-
-  // ── Buttons (dentro do dropzone) ──
-  .matcha-uploader-btn--accent {
-    border-color: var(--matcha-color-accent, #{getAccent($theme)});
-    color: var(--matcha-color-text-primary, #{getForeground($theme)});
-
-    &:hover:not([disabled]) {
-      background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-    }
-
-    &[disabled] {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
+  .matcha-file-uploader-dropzone__hint {
+    color: var(--matcha-color-text-secondary);
   }
 
   // ── File item ──
-  .matcha-uploader-file {
-    background: var(--matcha-color-surface-card, #{getSurface($theme)});
-    border-color: var(--matcha-color-surface-border, #{getGrey($theme)});
+  .matcha-file-uploader-file {
+    background: var(--matcha-color-surface-card);
+    border-color: var(--matcha-color-surface-border);
   }
 
-  .matcha-uploader-file__thumb {
-    background: var(--matcha-color-elevation-surface-3, var(--matcha-color-surface-card, #{getSurface($theme)}));
-    color: var(--matcha-color-text-muted, #{getBlueGrey($theme)});
+  .matcha-file-uploader-file__thumb {
+    background: var(--matcha-color-elevation-surface-3, var(--matcha-color-surface-card));
+    color: var(--matcha-color-text-muted);
   }
 
-  .matcha-uploader-file__name {
-    color: var(--matcha-color-text-primary, #{getForeground($theme)});
+  .matcha-file-uploader-file__name {
+    color: var(--matcha-color-text-primary);
   }
 
-  .matcha-uploader-file__size {
-    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+  .matcha-file-uploader-file__size {
+    color: var(--matcha-color-text-secondary);
   }
 
-  .matcha-uploader-file__progress {
-    background: var(--matcha-color-surface-border, #{getGrey($theme)});
+  .matcha-file-uploader-file__progress {
+    background: var(--matcha-color-surface-border);
   }
 
-  .matcha-uploader-file__progress-fill {
-    background: var(--matcha-color-accent, #{getAccent($theme)});
+  .matcha-file-uploader-file__progress-fill {
+    background: var(--matcha-color-accent);
   }
 
-  .matcha-uploader-file__percent {
-    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+  .matcha-file-uploader-file__percent {
+    color: var(--matcha-color-text-secondary);
   }
 
-  .matcha-uploader-file__error-text {
-    color: var(--matcha-color-danger, #{getDanger($theme)});
+  .matcha-file-uploader-file__error-text {
+    color: var(--matcha-color-danger);
   }
 
-  .matcha-uploader-file__action {
-    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+  .matcha-file-uploader-file__action {
+    color: var(--matcha-color-text-secondary);
 
     &:hover {
       background: var(--matcha-color-surface-hover, transparent);
-      color: var(--matcha-color-text-primary, #{getForeground($theme)});
+      color: var(--matcha-color-text-primary);
     }
 
-    &.matcha-uploader-file__action--delete:hover {
-      color: var(--matcha-color-danger, #{getDanger($theme)});
+    &.matcha-file-uploader-file__action--delete:hover {
+      color: var(--matcha-color-danger);
+    }
+  }
+
+  // ── Card layout (preview preenchido) ──
+  .matcha-file-uploader-card {
+    border-color: var(--matcha-color-surface-border);
+  }
+
+  // contain (logo/transparência): fundo neutro atrás da imagem inteira
+  .matcha-file-uploader-card--contain {
+    background: var(--matcha-color-surface-card);
+  }
+
+  .matcha-file-uploader-card__action {
+    background: var(--matcha-color-surface-card-alpha, var(--matcha-color-surface-card));
+    color: var(--matcha-color-text-primary);
+
+    &:hover {
+      background: var(--matcha-color-surface-card);
     }
   }
 }
@@ -117,13 +120,21 @@
 // ──────────────────────────────────────────────────────────────────────────────
 
 // Host — full-width; consumer aplica max-width externamente se quiser cap
-.matcha-uploader {
+.matcha-file-uploader {
   display: block;
   width: 100%;
 }
 
-// ── Dropzone (Estado=Dropzone — Figma 16152:209) ─────────────────────────────
-.matcha-uploader-dropzone {
+// ── Empty state wrapper (dropzone + ação secundária FORA do drop) ──────────
+.matcha-file-uploader-empty {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-150, 12px);
+  width: 100%;
+}
+
+// ── Dropzone box (Estado=Dropzone — Figma 16152:209) — a zona INTEIRA é o alvo
+.matcha-file-uploader-dropzone {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -135,10 +146,24 @@
   cursor: pointer;
   transition: background-color var(--matcha-duration-instant, 80ms) linear,
               border-color var(--matcha-duration-instant, 80ms) linear;
+
+  &:focus-visible {
+    outline: var(--matcha-border-thin, 2px) solid var(--matcha-color-accent, #009400);
+    outline-offset: 2px;
+  }
+}
+
+// layout="card": dropzone vazio compartilha a proporção do card preenchido
+// (aspect-ratio aplicado inline via previewRatio) pra empty e filled terem a
+// MESMA altura lado a lado. Sem isso, vazio é dimensionado por padding/conteúdo
+// e preenchido por aspect-ratio → alturas divergentes.
+.matcha-file-uploader-dropzone--card {
+  width: 100%;
+  overflow: hidden;
 }
 
 // Icon pill (bg interaction/disabled-bg + padding 40h/16v · icon 24×24)
-.matcha-uploader-dropzone__icon-pill {
+.matcha-file-uploader-dropzone__icon-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -154,7 +179,7 @@
 }
 
 // Text block — column gap 4px, center
-.matcha-uploader-dropzone__text {
+.matcha-file-uploader-dropzone__text {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -164,7 +189,7 @@
 }
 
 // Title row (inline: title + optional)
-.matcha-uploader-dropzone__title-row {
+.matcha-file-uploader-dropzone__title-row {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -172,21 +197,21 @@
   white-space: nowrap;
 }
 
-.matcha-uploader-dropzone__title {
+.matcha-file-uploader-dropzone__title {
   font-family: var(--matcha-font-family);
   font-size: var(--matcha-text-label-md, 14px);
   font-weight: var(--matcha-weight-medium, 500);
   line-height: var(--matcha-leading-label-md, 20px);
 }
 
-.matcha-uploader-dropzone__optional {
+.matcha-file-uploader-dropzone__optional {
   font-family: var(--matcha-font-family);
   font-size: var(--matcha-text-label-md, 14px);
   font-weight: var(--matcha-weight-medium, 500);
   line-height: var(--matcha-leading-label-md, 20px);
 }
 
-.matcha-uploader-dropzone__hint {
+.matcha-file-uploader-dropzone__hint {
   margin: 0;
   font-family: var(--matcha-font-family);
   font-size: var(--matcha-text-body-sm, 12px);
@@ -196,42 +221,13 @@
 }
 
 // Actions row (slot secondary + select arquivo)
-.matcha-uploader-dropzone__actions {
-  display: flex;
-  gap: var(--matcha-space-100, 8px);
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-// Botão accent outline (Selecionar arquivo)
-.matcha-uploader-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--matcha-space-050, 4px);
-  height: 32px;
-  padding: 0 var(--matcha-space-100, 8px);
-  background: transparent;
-  border: var(--matcha-border-thin, 2px) solid transparent;
-  border-radius: var(--matcha-radius-lg, 8px);
-  cursor: pointer;
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-label-sm, 12px);
-  font-weight: var(--matcha-weight-medium, 500);
-  line-height: var(--matcha-leading-label-sm, 16px);
-  letter-spacing: 0.2px;
-  white-space: nowrap;
-  transition: background-color var(--matcha-duration-instant, 80ms) linear;
-}
-
 // Hidden input
-.matcha-uploader-input {
+.matcha-file-uploader-input {
   display: none;
 }
 
 // ── File Item — Estados Enviando (16152:227) e Completo (16152:242) ──────────
-.matcha-uploader-file {
+.matcha-file-uploader-file {
   display: flex;
   align-items: center;
   gap: var(--matcha-space-200, 16px);
@@ -241,19 +237,19 @@
   width: 100%;
 
   // Enviando: padding 20/24 (mais respiro vs. Figma original 16)
-  &.matcha-uploader-file--uploading {
+  &.matcha-file-uploader-file--uploading {
     padding: var(--matcha-space-250, 20px) var(--matcha-space-300, 24px);
   }
 
   // Completo/Erro: padding 20/24 (mais respiro vs. Figma original 12/16)
-  &.matcha-uploader-file--completed,
-  &.matcha-uploader-file--error {
+  &.matcha-file-uploader-file--completed,
+  &.matcha-file-uploader-file--error {
     padding: var(--matcha-space-250, 20px) var(--matcha-space-300, 24px);
   }
 }
 
 // Thumbnail 64×36 (16:9 · radius lg)
-.matcha-uploader-file__thumb {
+.matcha-file-uploader-file__thumb {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -277,7 +273,7 @@
 }
 
 // Info column (flex-1)
-.matcha-uploader-file__info {
+.matcha-file-uploader-file__info {
   display: flex;
   flex-direction: column;
   flex: 1 1 0;
@@ -285,19 +281,19 @@
   overflow: hidden;
 
   // Enviando: gap 6 (entre nome e progress bar)
-  .matcha-uploader-file--uploading & {
+  .matcha-file-uploader-file--uploading & {
     gap: var(--matcha-space-075, 6px);
   }
 
   // Completo: gap 4 (entre nome e size)
-  .matcha-uploader-file--completed &,
-  .matcha-uploader-file--error & {
+  .matcha-file-uploader-file--completed &,
+  .matcha-file-uploader-file--error & {
     gap: var(--matcha-space-050, 4px);
   }
 }
 
 // File name — Manrope Medium 13/19 letter 0.2 (text/button-sm)
-.matcha-uploader-file__name {
+.matcha-file-uploader-file__name {
   font-family: var(--matcha-font-family);
   font-size: var(--matcha-text-label-sm, 12px);
   font-weight: var(--matcha-weight-medium, 500);
@@ -309,7 +305,7 @@
 }
 
 // File size — Manrope Regular 11/14 letter 0.3 (text/caption)
-.matcha-uploader-file__size {
+.matcha-file-uploader-file__size {
   font-family: var(--matcha-font-family);
   font-size: var(--matcha-text-p-tiny, 11px);
   font-weight: var(--matcha-weight-regular, 400);
@@ -318,7 +314,7 @@
 }
 
 // Error text — body-sm danger
-.matcha-uploader-file__error-text {
+.matcha-file-uploader-file__error-text {
   font-family: var(--matcha-font-family);
   font-size: var(--matcha-text-body-sm, 12px);
   font-weight: var(--matcha-weight-regular, 400);
@@ -326,21 +322,21 @@
 }
 
 // ── Progress bar (height 4px · radius sm) ─────────────────────────────────────
-.matcha-uploader-file__progress {
+.matcha-file-uploader-file__progress {
   width: 100%;
   height: 4px;
   border-radius: var(--matcha-radius-sm, 2px);
   overflow: hidden;
 }
 
-.matcha-uploader-file__progress-fill {
+.matcha-file-uploader-file__progress-fill {
   height: 100%;
   border-radius: var(--matcha-radius-sm, 2px);
   transition: width var(--matcha-duration-moderate, 300ms) ease;
 }
 
 // Percent label — body-sm text-secondary
-.matcha-uploader-file__percent {
+.matcha-file-uploader-file__percent {
   font-family: var(--matcha-font-family);
   font-size: var(--matcha-text-body-sm, 12px);
   font-weight: var(--matcha-weight-regular, 400);
@@ -349,7 +345,7 @@
 }
 
 // Cancel/Delete action button — 20×20 (icon size + bg transparent + hover)
-.matcha-uploader-file__action {
+.matcha-file-uploader-file__action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -371,23 +367,104 @@
   }
 }
 
+// ── Card layout — preview preenchido 16:9 + ações no hover (Estado=Drop filled) ──
+.matcha-file-uploader-card {
+  position: relative;
+  width: 100%;
+  // SEM margin-top: o card preenchido tem que alinhar o topo com o dropzone
+  // vazio quando lado a lado (layout card). margin-top desalinhava em 8px.
+  border: var(--matcha-border-hairline, 1px) solid transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  overflow: hidden;
+  aspect-ratio: 16 / 9; // fallback; sobrescrito por [style.aspect-ratio]="previewRatio"
+}
+
+.matcha-file-uploader-card__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover; // sobrescrito por [style.object-fit]="previewFit"
+}
+
+.matcha-file-uploader-card__actions {
+  position: absolute;
+  top: var(--matcha-space-100, 8px);
+  right: var(--matcha-space-100, 8px);
+  display: flex;
+  gap: var(--matcha-space-100, 8px);
+  opacity: 1; // persistente — descobrível e operável em touch (canon 20252:2253)
+  transition: opacity var(--matcha-duration-instant, 80ms) linear;
+}
+
+// Em dispositivos com hover, atenua no resting e destaca no hover/foco — mantém
+// a tela limpa sem esconder a affordance onde não há hover (touch/totem).
+@media (hover: hover) {
+  .matcha-file-uploader-card__actions { opacity: 0.72; }
+
+  .matcha-file-uploader-card:hover .matcha-file-uploader-card__actions,
+  .matcha-file-uploader-card:focus-within .matcha-file-uploader-card__actions {
+    opacity: 1;
+  }
+}
+
+.matcha-file-uploader-card__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: background-color var(--matcha-duration-instant, 80ms) linear;
+
+  matcha-icon {
+    --matcha-icon-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+// ── Cropper inline (modo crop: imagem única) ──────────────────────────────
+.matcha-file-uploader-cropper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-150, 12px);
+  margin-top: var(--matcha-space-100, 8px);
+}
+
+.matcha-file-uploader-cropper matcha-crop {
+  display: block;
+  width: 100%;
+  min-height: 280px;
+}
+
+.matcha-file-uploader-cropper__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--matcha-space-100, 8px);
+}
+
 // ── Responsive ───────────────────────────────────────────────────────────────
 @include media-breakpoint('xs') {
-  .matcha-uploader-dropzone {
+  .matcha-file-uploader-dropzone {
     padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
   }
 
-  .matcha-uploader-dropzone__icon-pill {
+  .matcha-file-uploader-dropzone__icon-pill {
     padding: var(--matcha-space-150, 12px) var(--matcha-space-400, 32px);
   }
 }
 
 // ── Reduced motion ───────────────────────────────────────────────────────────
 @media (prefers-reduced-motion: reduce) {
-  .matcha-uploader-dropzone,
-  .matcha-uploader-file__progress-fill,
-  .matcha-uploader-btn,
-  .matcha-uploader-file__action {
+  .matcha-file-uploader-dropzone,
+  .matcha-file-uploader-file__progress-fill,
+  .matcha-file-uploader-file__action,
+  .matcha-file-uploader-card__actions,
+  .matcha-file-uploader-card__action {
     transition: none;
   }
 }

package/components/matcha-footer.scss

@@ -12,12 +12,11 @@
 // =============================================================================
 
 @mixin matcha-footer-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     .matcha-footer {
-        background: var(--matcha-color-surface-card, #{getSurface($theme)});
-        border-top: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, #{getGrey($theme)});
-        color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+        background: var(--matcha-color-surface-card);
+        border-top: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+        color: var(--matcha-color-text-label);
     }
 }
 

package/components/matcha-form-field.scss

@@ -516,16 +516,16 @@ matcha-form-field[readonly="true"] .matcha-form-field {
         input[type="date"],
         input[type="time"],
         textarea {
-            color: var(--matcha-color-text-primary, #{getForeground($theme)});
+            color: var(--matcha-color-text-primary);
 
             &::placeholder {
-                color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+                color: var(--matcha-color-text-placeholder);
             }
         }
 
         input:disabled,
         textarea:disabled {
-            color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+            color: var(--matcha-color-interaction-disabled-fg);
         }
 
         // Disabled: muted text, cursor not-allowed (sinalização inequívoca de "não pode interagir").

package/components/matcha-form-section.scss

@@ -9,31 +9,30 @@
 // =============================================================================
 
 @mixin matcha-form-section-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   // ── Section (accent bar + title) ──
   .matcha-form-section {
     .matcha-form-section__bar {
-      background: var(--matcha-color-accent, #{getAccent($theme)});
+      background: var(--matcha-color-accent);
     }
 
     .matcha-form-section__title {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
+      color: var(--matcha-color-fg);
     }
 
     .matcha-form-section__description {
-      color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+      color: var(--matcha-color-text-secondary);
     }
   }
 
   // ── Sub-section (bullet + title) ──
   .matcha-form-subsection {
     .matcha-form-subsection__bullet {
-      background: var(--matcha-color-fg, #{getForeground($theme)});
+      background: var(--matcha-color-fg);
     }
 
     .matcha-form-subsection__title {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
+      color: var(--matcha-color-fg);
     }
   }
 }

package/components/matcha-header.scss

@@ -11,16 +11,15 @@
 // =============================================================================
 
 @mixin matcha-header-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     matcha-header {
-        background: var(--matcha-color-surface-card, #{getSurface($theme)});
+        background: var(--matcha-color-surface-card);
         // Border uses interaction/disabled-border (1:1 Figma matcha/header 15892:157):
         // dark = rgba(232,234,237,0.38); light = #c8d2ca. Semanticamente atípico —
         // o token canônico de "divisor de chrome" seria surface/border, mas Figma
         // bind explicitamente este. Trocar de volta se for revertido lá.
-        border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-interaction-disabled-border, #{getGrey($theme)});
-        color: var(--matcha-color-text-primary, #{getForeground($theme)});
+        border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-interaction-disabled-border);
+        color: var(--matcha-color-text-primary);
     }
 }
 

package/components/matcha-hint-text.scss

@@ -48,19 +48,19 @@
         @include generate-matcha-hint-size-classes($helper-breakpoints);
 
         &[type="error"] {
-            color: var(--matcha-color-danger, #{getDanger($theme)});
+            color: var(--matcha-color-danger);
         }
 
         &[type="warning"] {
-            color: var(--matcha-color-warn, #{getWarn($theme)});
+            color: var(--matcha-color-warn);
         }
 
         &[type="info"] {
-            color: var(--matcha-color-info, #{getInfo($theme)});
+            color: var(--matcha-color-info);
         }
 
         &[type="success"] {
-            color: var(--matcha-color-success, #{getSuccess($theme)});
+            color: var(--matcha-color-success);
         }
     }
 }