@inchurch/matcha-theme 20.0.3

package/components/matcha-empty-state.scss

@@ -0,0 +1,118 @@
+// =============================================================================
+// matcha-empty-state.scss — Empty state placeholder
+// Aligned with Figma matcha/empty-state: Tamanho(2) × Ação(2) × Descrição(2)
+// =============================================================================
+
+// ── Structural ──────────────────────────────────────────────────────────────
+
+matcha-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  padding: var(--matcha-space-600, 48px) var(--matcha-space-400, 32px);
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.matcha-empty-state__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--matcha-space-200, 16px);
+  max-width: 400px;
+  width: 100%;
+}
+
+.matcha-empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: var(--matcha-radius-xl, 16px);
+  flex-shrink: 0;
+}
+
+.matcha-empty-state__text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+}
+
+.matcha-empty-state__title {
+  font-size: var(--matcha-text-lg, 16px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: 1.4;
+  margin: 0;
+}
+
+.matcha-empty-state__description {
+  font-size: var(--matcha-text-md, 14px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: 1.5;
+  max-width: 320px;
+  margin: 0;
+}
+
+.matcha-empty-state__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// ── Compact variant ──
+matcha-empty-state.matcha-empty-state--compact {
+  padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
+
+  .matcha-empty-state__content {
+    max-width: 280px;
+    gap: var(--matcha-space-150, 12px);
+  }
+
+  .matcha-empty-state__icon {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--matcha-radius-lg, 8px);
+  }
+
+  .matcha-empty-state__title {
+    font-size: var(--matcha-text-md, 14px);
+  }
+}
+
+// ── Responsive fallback ──
+@media (max-width: 479px) {
+  matcha-empty-state:not(.matcha-empty-state--compact) {
+    padding: var(--matcha-space-400, 32px) var(--matcha-space-250, 20px);
+
+    .matcha-empty-state__icon {
+      width: 48px;
+      height: 48px;
+      border-radius: var(--matcha-radius-lg, 8px);
+    }
+  }
+}
+
+// =============================================================================
+// Theme
+// =============================================================================
+
+@mixin matcha-empty-state-theme($theme) {
+  .matcha-empty-state__icon {
+    background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+    opacity: var(--matcha-opacity-disabled, 0.38);
+  }
+
+  .matcha-empty-state__title {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+
+  .matcha-empty-state__description {
+    color: var(--matcha-color-hint, #{getGrey($theme)});
+  }
+}

package/components/matcha-flag.scss

@@ -0,0 +1,62 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-flag.scss — Country flags & payment brand flags
+// Aligned with Figma matcha/flag/país + matcha/flag/pagamento:
+//   País: 4 variants (Brasil, EUA, Portugal, Espanha) — 22×16px (2:3)
+//   Pagamento: 20 variants (Mastercard, Visa, PIX...) — 32×24px
+//   Used in: phone DDI selector, payment forms, transaction lists
+// Angular: matcha-flag
+// =============================================================================
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-flag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+
+  img, svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+// ── Country flags (2:3 ratio) ───────────────────────────────────────────────
+
+.matcha-flag--country {
+  width: 22px;
+  height: 16px;
+  border-radius: var(--matcha-radius-sm, 2px);
+}
+
+.matcha-flag--country-lg {
+  width: 32px;
+  height: 24px;
+  border-radius: var(--matcha-radius-sm, 2px);
+}
+
+// ── Payment flags (4:3 ratio) ───────────────────────────────────────────────
+
+.matcha-flag--payment {
+  width: 32px;
+  height: 24px;
+  border-radius: var(--matcha-radius-sm, 2px);
+}
+
+.matcha-flag--payment-lg {
+  width: 48px;
+  height: 36px;
+  border-radius: var(--matcha-radius-md, 4px);
+}
+
+// ── Theme (border for visibility on dark/light) ────────────────────────────
+
+@mixin matcha-flag-theme($theme) {
+  .matcha-flag {
+    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+  }
+}

package/components/matcha-footer.scss

@@ -0,0 +1,187 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-footer.scss — App footer bar (branding + actions)
+// Aligned with Figma matcha/footer (3 variantes: Default, Expanded, Mobile)
+// Angular: matcha-footer (standalone component)
+// =============================================================================
+
+@mixin matcha-footer-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  // ── Footer Container ──
+  .matcha-footer {
+    background: var(--matcha-color-surface, #{getSurface($theme)});
+    border-top: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+
+    // ── Brand area ──
+    .matcha-footer__brand {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+    }
+
+    .matcha-footer__brand-icon {
+      color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    .matcha-footer__brand-text {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    // ── Copyright ──
+    .matcha-footer__copyright {
+      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    }
+
+    // ── Version info ──
+    .matcha-footer__version {
+      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    }
+  }
+
+  // ── Chat FAB ──
+  .matcha-footer-fab {
+    background: var(--matcha-color-accent, #{getAccent($theme)});
+    color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
+    box-shadow: var(--matcha-shadow-2, #{if($is-dark, $shadow-2-dark, $shadow-2-light)});
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+
+    .matcha-footer-fab__badge {
+      background: var(--matcha-color-feedback-danger, #{getDanger($theme)});
+      color: var(--matcha-color-feedback-danger-contrast, #{getDangerContrast($theme)});
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  // Figma matcha/footer: h 28, pad 8/16
+  min-height: 28px;
+  padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+}
+
+.matcha-footer__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-050, 4px);
+}
+
+.matcha-footer__brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--matcha-icon-size-sm, 16px);
+  height: var(--matcha-icon-size-sm, 16px);
+  flex-shrink: 0;
+}
+
+.matcha-footer__brand-text {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: var(--matcha-leading-body-sm, 16px);
+  white-space: nowrap;
+}
+
+.matcha-footer__copyright {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  line-height: var(--matcha-leading-body-sm, 16px);
+  white-space: nowrap;
+}
+
+.matcha-footer__version {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-xs, 10px);
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+// ── Chat FAB ────────────────────────────────────────────────────────────────
+
+.matcha-footer-fab {
+  position: fixed;
+  bottom: var(--matcha-space-200, 16px);
+  right: var(--matcha-space-200, 16px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  cursor: pointer;
+  z-index: 100;
+  transition: opacity var(--matcha-duration-instant, 80ms) linear;
+
+  .matcha-footer-fab__icon {
+    width: var(--matcha-icon-size-md, 24px);
+    height: var(--matcha-icon-size-md, 24px);
+  }
+
+  .matcha-footer-fab__badge {
+    position: absolute;
+    top: var(--matcha-space-050, 4px);
+    right: var(--matcha-space-050, 4px);
+    min-width: var(--matcha-space-200, 16px);
+    height: var(--matcha-space-200, 16px);
+    border-radius: var(--matcha-radius-pill, 9999px);
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-xs, 10px);
+    font-weight: var(--matcha-weight-bold, 700);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--matcha-space-050, 4px);
+  }
+
+  // Empty badge (dot only)
+  .matcha-footer-fab__badge--dot {
+    min-width: var(--matcha-space-100, 8px);
+    height: var(--matcha-space-100, 8px);
+    padding: 0;
+  }
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@include media-breakpoint('xs') {
+  .matcha-footer {
+    min-height: var(--matcha-space-400, 32px);
+    padding: var(--matcha-space-075, 6px) var(--matcha-space-200, 16px);
+  }
+
+  .matcha-footer__brand-text {
+    font-size: var(--matcha-text-body-xs, 10px);
+  }
+
+  .matcha-footer-fab {
+    bottom: var(--matcha-space-150, 12px);
+    right: var(--matcha-space-150, 12px);
+    width: 48px;
+    height: 48px;
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-footer-fab {
+    transition: none;
+  }
+}