@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-uploader.scss

@@ -1,55 +1,89 @@
 @use "sass:map";
 
 // =============================================================================
-// matcha-uploader.scss — File upload component
-// Aligned with Figma matcha/uploader:
-//   Estado(3: Dropzone, Enviando, Completo)
-// Angular: matcha-uploader
+// matcha-uploader.scss — File upload component (matcha/file-upload no Figma DSV3)
+//
+// 3 estados canon (16152:254):
+//   Estado=Dropzone  (16152:209) — área vazia com icon pill + title + hint + 2 botões
+//   Estado=Enviando  (16152:227) — thumb 64×36 + nome + progress + % + cancel
+//   Estado=Completo  (16152:242) — thumb 64×36 + nome + size + delete (trash)
+//
+// Width canon: 480px (component se adapta via max-width: 480px + width: 100%)
 // =============================================================================
 
 @mixin matcha-uploader-theme($theme) {
   $is-dark: map.get($theme, is-dark);
 
-  // ── Dropzone ──
+  // ── Dropzone ──
   .matcha-uploader-dropzone {
-    background: var(--matcha-color-surface-bg, #{getBackground($theme)});
-    border-color: var(--matcha-color-border, #{getGrey($theme)});
+    background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg, #{getBackground($theme)}));
+    border-color: var(--matcha-color-surface-border, #{getGrey($theme)});
 
     &.matcha-uploader-dragover {
       background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
       border-color: var(--matcha-color-accent, #{getAccent($theme)});
     }
 
-    &.matcha-uploader-error {
-      border-color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
+    &.matcha-uploader-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
     }
   }
 
-  .matcha-uploader-dropzone__icon {
-    background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-    color: var(--matcha-color-accent, #{getAccent($theme)});
+  .matcha-uploader-dropzone__icon-pill {
+    background: var(--matcha-color-interaction-disabled-bg, #282c34);
+    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
   }
 
   .matcha-uploader-dropzone__title {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    color: var(--matcha-color-text-primary, #{getForeground($theme)});
+  }
+
+  .matcha-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-hint, #{getBlueGrey($theme)});
+    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;
+    }
   }
 
-  // ── File item ──
+  // ── File item ──
   .matcha-uploader-file {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    border-color: var(--matcha-color-border, #{getGrey($theme)});
+    background: var(--matcha-color-surface-card, #{getSurface($theme)});
+    border-color: var(--matcha-color-surface-border, #{getGrey($theme)});
+  }
+
+  .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-uploader-file__name {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    color: var(--matcha-color-text-primary, #{getForeground($theme)});
   }
 
   .matcha-uploader-file__size {
-    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
+    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+  }
+
+  .matcha-uploader-file__progress {
+    background: var(--matcha-color-surface-border, #{getGrey($theme)});
   }
 
   .matcha-uploader-file__progress-fill {
@@ -57,71 +91,138 @@
   }
 
   .matcha-uploader-file__percent {
-    color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-  }
-
-  .matcha-uploader-file__check {
-    color: var(--matcha-color-feedback-success, #{getSuccess($theme)});
+    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
   }
 
   .matcha-uploader-file__error-text {
-    color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
+    color: var(--matcha-color-danger, #{getDanger($theme)});
   }
 
-  .matcha-uploader-file__progress {
-    background: var(--matcha-color-border, #{getGrey($theme)});
+  .matcha-uploader-file__action {
+    color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
+
+    &:hover {
+      background: var(--matcha-color-surface-hover, transparent);
+      color: var(--matcha-color-text-primary, #{getForeground($theme)});
+    }
+
+    &.matcha-uploader-file__action--delete:hover {
+      color: var(--matcha-color-danger, #{getDanger($theme)});
+    }
   }
 }
 
-// ── Dropzone Layout ─────────────────────────────────────────────────────────
+// ──────────────────────────────────────────────────────────────────────────────
+// LAYOUT — independente de tema
+// ──────────────────────────────────────────────────────────────────────────────
+
+// Host — full-width; consumer aplica max-width externamente se quiser cap
+.matcha-uploader {
+  display: block;
+  width: 100%;
+}
 
+// ── Dropzone (Estado=Dropzone — Figma 16152:209) ─────────────────────────────
 .matcha-uploader-dropzone {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  // Figma matcha/uploader Dropzone: pad 32/24, gap 16, radius 8
   gap: var(--matcha-space-200, 16px);
   padding: var(--matcha-space-400, 32px) var(--matcha-space-300, 24px);
-  border: 2px dashed transparent;
+  border: var(--matcha-border-thin, 2px) dashed transparent;
   border-radius: var(--matcha-radius-lg, 8px);
   cursor: pointer;
   transition: background-color var(--matcha-duration-instant, 80ms) linear,
               border-color var(--matcha-duration-instant, 80ms) linear;
-
-  &:hover {
-    opacity: 0.9;
-  }
 }
 
-.matcha-uploader-dropzone__icon {
-  display: flex;
+// Icon pill (bg interaction/disabled-bg + padding 40h/16v · icon 24×24)
+.matcha-uploader-dropzone__icon-pill {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--matcha-icon-size-lg, 48px);
-  height: var(--matcha-icon-size-lg, 48px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-500, 40px);
   border-radius: var(--matcha-radius-pill, 9999px);
+  flex-shrink: 0;
+
+  matcha-icon {
+    --matcha-icon-size: 24px;
+    width: 24px;
+    height: 24px;
+  }
 }
 
+// Text block — column gap 4px, center
 .matcha-uploader-dropzone__text {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--matcha-space-050, 4px);
   text-align: center;
+  width: 100%;
+}
+
+// Title row (inline: title + optional)
+.matcha-uploader-dropzone__title-row {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--matcha-space-050, 4px);
+  white-space: nowrap;
 }
 
 .matcha-uploader-dropzone__title {
   font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: var(--matcha-weight-semibold, 600);
-  line-height: var(--matcha-leading-body-md, 20px);
+  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 {
+  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 {
+  margin: 0;
   font-family: var(--matcha-font-family);
   font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-regular, 400);
   line-height: var(--matcha-leading-body-sm, 16px);
+  white-space: pre-line; // suporta \n pra hint multi-linha (1280×720 px... \n Clique pra selecionar...)
+}
+
+// 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
@@ -129,21 +230,36 @@
   display: none;
 }
 
-// ── File Item Layout ────────────────────────────────────────────────────────
-
+// ── File Item — Estados Enviando (16152:227) e Completo (16152:242) ──────────
 .matcha-uploader-file {
   display: flex;
   align-items: center;
-  gap: var(--matcha-space-150, 12px);
-  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  gap: var(--matcha-space-200, 16px);
   border: var(--matcha-border-hairline, 1px) solid transparent;
   border-radius: var(--matcha-radius-lg, 8px);
+  margin-top: var(--matcha-space-100, 8px);
+  width: 100%;
+
+  // Enviando: padding 20/24 (mais respiro vs. Figma original 16)
+  &.matcha-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 {
+    padding: var(--matcha-space-250, 20px) var(--matcha-space-300, 24px);
+  }
 }
 
-.matcha-uploader-file__icon {
-  width: var(--matcha-space-500, 40px);
-  height: var(--matcha-space-500, 40px);
-  border-radius: var(--matcha-radius-md, 4px);
+// Thumbnail 64×36 (16:9 · radius lg)
+.matcha-uploader-file__thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 36px;
+  border-radius: var(--matcha-radius-lg, 8px);
   flex-shrink: 0;
   overflow: hidden;
 
@@ -152,64 +268,126 @@
     height: 100%;
     object-fit: cover;
   }
+
+  matcha-icon {
+    --matcha-icon-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
 }
 
+// Info column (flex-1)
 .matcha-uploader-file__info {
   display: flex;
   flex-direction: column;
-  gap: var(--matcha-space-050, 4px);
-  flex: 1;
+  flex: 1 1 0;
   min-width: 0;
+  overflow: hidden;
+
+  // Enviando: gap 6 (entre nome e progress bar)
+  .matcha-uploader-file--uploading & {
+    gap: var(--matcha-space-075, 6px);
+  }
+
+  // Completo: gap 4 (entre nome e size)
+  .matcha-uploader-file--completed &,
+  .matcha-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 {
   font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-sm, 12px);
+  font-size: var(--matcha-text-label-sm, 12px);
   font-weight: var(--matcha-weight-medium, 500);
-  line-height: var(--matcha-leading-body-sm, 16px);
+  line-height: var(--matcha-leading-label-sm, 16px);
+  letter-spacing: 0.2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+// File size — Manrope Regular 11/14 letter 0.3 (text/caption)
 .matcha-uploader-file__size {
   font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-caption, 11px);
+  font-size: var(--matcha-text-p-tiny, 11px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-p-tiny, 14px);
+  letter-spacing: 0.3px;
 }
 
-// ── Progress ──
+// Error text — body-sm danger
+.matcha-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);
+  line-height: var(--matcha-leading-body-sm, 16px);
+}
+
+// ── Progress bar (height 4px · radius sm) ─────────────────────────────────────
 .matcha-uploader-file__progress {
   width: 100%;
-  height: var(--matcha-border-medium, 4px);
-  border-radius: var(--matcha-radius-xs, 2px);
+  height: 4px;
+  border-radius: var(--matcha-radius-sm, 2px);
   overflow: hidden;
 }
 
 .matcha-uploader-file__progress-fill {
   height: 100%;
-  border-radius: var(--matcha-radius-xs, 2px);
+  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 {
   font-family: var(--matcha-font-family);
   font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-sm, 16px);
   flex-shrink: 0;
 }
 
-// ── Responsive ──────────────────────────────────────────────────────────────
+// Cancel/Delete action button — 20×20 (icon size + bg transparent + hover)
+.matcha-uploader-file__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--matcha-radius-sm, 2px);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--matcha-duration-instant, 80ms) linear,
+              color var(--matcha-duration-instant, 80ms) linear;
+
+  matcha-icon {
+    --matcha-icon-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
 
+// ── Responsive ───────────────────────────────────────────────────────────────
 @include media-breakpoint('xs') {
   .matcha-uploader-dropzone {
     padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
   }
-}
 
-// ── Reduced motion ──────────────────────────────────────────────────────────
+  .matcha-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-file__progress-fill,
+  .matcha-uploader-btn,
+  .matcha-uploader-file__action {
     transition: none;
   }
 }