@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-snack-bar.scss

@@ -1,259 +1,259 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "sass:map";
-
-// =============================================================================
-// matcha-snack-bar.scss — Snack Bar / Toast (floating feedback)
-// 1:1 com Figma DSV3 `matcha/snackbar` (5902:13641):
-//   Status (5): Erro · Alerta · Sucesso · Ideia · Neutro
-//   Estrutura single-row 68h: Icon + Body(Title + Description) + CTA + Close
-//   pad 12/16, gap 12; border-left 4px status color; bg surface-card sólido.
-//
-// Buttons internos = canon DSV3:
-//   - Action: <button matcha-button variant="outline" size="sm"> → estilo vem do matcha-buttons.scss
-//   - Close:  <button matcha-icon-button variant="ghost" size="sm"> → idem
-// Por isso este arquivo NÃO duplica width/height/border/states pros buttons —
-// só faz flex-shrink: 0 pra não esticar.
-//
-// vs Notification: Notification = in-page (bg alpha, sem shadow); Snackbar = floating
-// (bg sólido, shadow level-3, position fixed).
-// =============================================================================
-
-// ── Structural ──────────────────────────────────────────────────────────────
-
-matcha-snack-bar {
-  position: fixed;
-  z-index: var(--matcha-z-snackbar, 9999);
-  right: var(--matcha-space-300, 24px);
-  top: var(--matcha-space-300, 24px);
-  // Enter animation: slide + scale-in + fade (canon Material 3 emphasized).
-  // Mais natural que slide-only — sinaliza "entrou no plano" sem ser distrativo.
-  transform: translateY(-8px) scale(0.96);
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    opacity var(--matcha-duration-moderate, 300ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
-    transform var(--matcha-duration-moderate, 300ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-  min-width: var(--matcha-snackbar-min-width, 360px);
-  max-width: var(--matcha-snackbar-max-width, 520px);
-  touch-action: pan-y; // permite swipe horizontal pra dismiss
-
-  // ── Position variants ──
-  &[position="bottom"] {
-    top: auto;
-    bottom: var(--matcha-space-300, 24px);
-    transform: translateY(8px) scale(0.96);
-  }
-
-  &[position="center"] {
-    right: auto;
-    left: 50%;
-    transform: translateX(-50%) translateY(-8px) scale(0.96);
-  }
-
-  // ── Visible state ──
-  &.matcha-snack-bar-visible {
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateY(0) scale(1);
-  }
-
-  &[position="bottom"].matcha-snack-bar-visible {
-    transform: translateY(0) scale(1);
-  }
-
-  &[position="center"].matcha-snack-bar-visible {
-    transform: translateX(-50%) translateY(0) scale(1);
-  }
-}
-
-// ── Content container (single-row 68h Figma) ────────────────────────────────
-// Frosted glass: bg semi-transparente + backdrop-filter blur — moderniza sem
-// quebrar a semântica de "não-bloqueante" (blur só atrás do card, não na tela).
-.matcha-snack-bar-content {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-150, 12px);
-  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-  border-radius: var(--matcha-radius-lg, 8px);
-  border: var(--matcha-border-hairline, 1px) solid transparent;
-  border-left: var(--matcha-border-medium, 4px) solid transparent;
-  box-sizing: border-box;
-  // min-height = 68 (figma single-row); cresce se body wrappar.
-  min-height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-350, 28px));
-  // Frosted glass — funciona em Safari/Chrome/Firefox 103+; degrade gracioso
-  // (bg sólido sobrescreve no theme mixin via fallback).
-  -webkit-backdrop-filter: blur(12px) saturate(140%);
-  backdrop-filter: blur(12px) saturate(140%);
-}
-
-// ── Icon (24×24 outlined leading) ───────────────────────────────────────────
-
-.matcha-snack-bar-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--matcha-icon-size-md, 24px);
-  height: var(--matcha-icon-size-md, 24px);
-}
-
-// ── Body (Title + Description, gap 4) ───────────────────────────────────────
-
-.matcha-snack-bar-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-050, 4px);
-}
-
-.matcha-snack-bar-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);
-}
-
-.matcha-snack-bar-description {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: var(--matcha-weight-regular, 400);
-  line-height: var(--matcha-leading-body-md, 20px);
-}
-
-// ── CTA Action button — só flex-shrink (estilo vem do matcha-button). ──────
-.matcha-snack-bar-action {
-  flex-shrink: 0;
-}
-
-// ── Close icon-button — só flex-shrink (estilo vem do matcha-icon-button). ─
-.matcha-snack-bar-close {
-  flex-shrink: 0;
-}
-
-// ── Responsive (mobile: stretch full-width) ────────────────────────────────
-@include media-breakpoint('xs') {
-  matcha-snack-bar {
-    left: var(--matcha-space-200, 16px);
-    right: var(--matcha-space-200, 16px);
-    min-width: auto;
-    max-width: none;
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-@media (prefers-reduced-motion: reduce) {
-  matcha-snack-bar {
-    transition: none;
-  }
-}
-
-// =============================================================================
-// Theme mixin — status colors via [color] attr
-// =============================================================================
-
-@mixin matcha-snack-bar-theme($theme) {
-
-  matcha-snack-bar {
-
-    // ── Base (neutral / no specific status) ──
-    // Bg semi-transparente pro frosted glass (backdrop-filter) ter o que blurrar.
-    // Fallback sólido em browsers sem suporte (degrade gracioso via @supports).
-    .matcha-snack-bar-content {
-      background: var(--matcha-color-surface-card-alpha);
-      color: var(--matcha-color-fg);
-      border-color: var(--matcha-color-border);
-      box-shadow: var(--matcha-shadow-3);
-    }
-
-    // Fallback sólido pra browsers sem backdrop-filter.
-    @supports not (backdrop-filter: blur(1px)) {
-      .matcha-snack-bar-content {
-        background: var(--matcha-color-surface);
-      }
-    }
-
-    .matcha-snack-bar-title       { color: var(--matcha-color-fg); }
-    .matcha-snack-bar-description { color: var(--matcha-color-text-label); }
-
-    // ── Status — canon DSV3 (mesmo pattern do matcha-notification):
-    //    1. `border-left-color` → cor do status na borda esquerda
-    //    2. `--matcha-icon-color` → matcha-icon herda via custom property
-    //    3. `--matcha-button-color-*` no .matcha-snack-bar-action → matcha-button
-    //       (Outline SM) renderiza com border/text/state-layer todos na status color
-    //
-    // Reforça semantic: icon + border-left + CTA = mesma cor.
-
-    &[color="error"]   .matcha-snack-bar-content,
-    &[color="danger"]  .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-danger);
-      --matcha-icon-color: var(--matcha-color-danger);
-
-      .matcha-snack-bar-action {
-        --matcha-button-color: var(--matcha-color-danger);
-        --matcha-button-color-hover: var(--matcha-color-danger-hover);
-        --matcha-button-color-pressed: var(--matcha-color-danger-pressed);
-        --matcha-button-color-text-on: var(--matcha-color-danger-contrast);
-        --matcha-button-color-alpha: var(--matcha-color-danger-alpha);
-        --matcha-button-color-edge: var(--matcha-color-danger);
-        color: var(--matcha-color-danger);
-      }
-    }
-
-    &[color="warning"] .matcha-snack-bar-content,
-    &[color="warn"]    .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-warn);
-      --matcha-icon-color: var(--matcha-color-warn);
-
-      .matcha-snack-bar-action {
-        --matcha-button-color: var(--matcha-color-warn);
-        --matcha-button-color-hover: var(--matcha-color-warn-hover);
-        --matcha-button-color-pressed: var(--matcha-color-warn-pressed);
-        --matcha-button-color-text-on: var(--matcha-color-warn-contrast);
-        --matcha-button-color-alpha: var(--matcha-color-warn-alpha);
-        --matcha-button-color-edge: var(--matcha-color-warn);
-        color: var(--matcha-color-warn);
-      }
-    }
-
-    &[color="success"] .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-success);
-      --matcha-icon-color: var(--matcha-color-success);
-
-      .matcha-snack-bar-action {
-        --matcha-button-color: var(--matcha-color-success);
-        --matcha-button-color-hover: var(--matcha-color-success-hover);
-        --matcha-button-color-pressed: var(--matcha-color-success-pressed);
-        --matcha-button-color-text-on: var(--matcha-color-success-contrast);
-        --matcha-button-color-alpha: var(--matcha-color-success-alpha);
-        --matcha-button-color-edge: var(--matcha-color-success);
-        color: var(--matcha-color-success);
-      }
-    }
-
-    &[color="info"] .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-info);
-      --matcha-icon-color: var(--matcha-color-info);
-
-      .matcha-snack-bar-action {
-        --matcha-button-color: var(--matcha-color-info);
-        --matcha-button-color-hover: var(--matcha-color-info-hover);
-        --matcha-button-color-pressed: var(--matcha-color-info-pressed);
-        --matcha-button-color-text-on: var(--matcha-color-info-contrast);
-        --matcha-button-color-alpha: var(--matcha-color-info-alpha);
-        --matcha-button-color-edge: var(--matcha-color-info);
-        color: var(--matcha-color-info);
-      }
-    }
-
-    // Neutro — bg/border surface; icon + CTA mantêm cor padrão (não-status).
-    &[color="neutral"] .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-surface-border);
-      --matcha-icon-color: var(--matcha-color-icon-default);
-
-      .matcha-snack-bar-action {
-        color: var(--matcha-color-text-label);
-      }
-    }
-  }
-}
+@use "../abstracts/media-breakpoint" as *;
+@use "sass:map";
+
+// =============================================================================
+// matcha-snack-bar.scss — Snack Bar / Toast (floating feedback)
+// 1:1 com Figma DSV3 `matcha/snackbar` (5902:13641):
+//   Status (5): Erro · Alerta · Sucesso · Ideia · Neutro
+//   Estrutura single-row 68h: Icon + Body(Title + Description) + CTA + Close
+//   pad 12/16, gap 12; border-left 4px status color; bg surface-card sólido.
+//
+// Buttons internos = canon DSV3:
+//   - Action: <button matcha-button variant="outline" size="sm"> → estilo vem do matcha-buttons.scss
+//   - Close:  <button matcha-icon-button variant="ghost" size="sm"> → idem
+// Por isso este arquivo NÃO duplica width/height/border/states pros buttons —
+// só faz flex-shrink: 0 pra não esticar.
+//
+// vs Notification: Notification = in-page (bg alpha, sem shadow); Snackbar = floating
+// (bg sólido, shadow level-3, position fixed).
+// =============================================================================
+
+// ── Structural ──────────────────────────────────────────────────────────────
+
+matcha-snack-bar {
+  position: fixed;
+  z-index: var(--matcha-z-snackbar, 9999);
+  right: var(--matcha-space-300, 24px);
+  top: var(--matcha-space-300, 24px);
+  // Enter animation: slide + scale-in + fade (canon Material 3 emphasized).
+  // Mais natural que slide-only — sinaliza "entrou no plano" sem ser distrativo.
+  transform: translateY(-8px) scale(0.96);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--matcha-duration-moderate, 300ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
+    transform var(--matcha-duration-moderate, 300ms) var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+  min-width: var(--matcha-snackbar-min-width, 360px);
+  max-width: var(--matcha-snackbar-max-width, 520px);
+  touch-action: pan-y; // permite swipe horizontal pra dismiss
+
+  // ── Position variants ──
+  &[position="bottom"] {
+    top: auto;
+    bottom: var(--matcha-space-300, 24px);
+    transform: translateY(8px) scale(0.96);
+  }
+
+  &[position="center"] {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%) translateY(-8px) scale(0.96);
+  }
+
+  // ── Visible state ──
+  &.matcha-snack-bar-visible {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+  }
+
+  &[position="bottom"].matcha-snack-bar-visible {
+    transform: translateY(0) scale(1);
+  }
+
+  &[position="center"].matcha-snack-bar-visible {
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+// ── Content container (single-row 68h Figma) ────────────────────────────────
+// Frosted glass: bg semi-transparente + backdrop-filter blur — moderniza sem
+// quebrar a semântica de "não-bloqueante" (blur só atrás do card, não na tela).
+.matcha-snack-bar-content {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-150, 12px);
+  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  border-radius: var(--matcha-radius-lg, 8px);
+  border: var(--matcha-border-hairline, 1px) solid transparent;
+  border-left: var(--matcha-border-medium, 4px) solid transparent;
+  box-sizing: border-box;
+  // min-height = 68 (figma single-row); cresce se body wrappar.
+  min-height: calc(var(--matcha-space-500, 40px) + var(--matcha-space-350, 28px));
+  // Frosted glass — funciona em Safari/Chrome/Firefox 103+; degrade gracioso
+  // (bg sólido sobrescreve no theme mixin via fallback).
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  backdrop-filter: blur(12px) saturate(140%);
+}
+
+// ── Icon (24×24 outlined leading) ───────────────────────────────────────────
+
+.matcha-snack-bar-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--matcha-icon-size-md, 24px);
+  height: var(--matcha-icon-size-md, 24px);
+}
+
+// ── Body (Title + Description, gap 4) ───────────────────────────────────────
+
+.matcha-snack-bar-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-050, 4px);
+}
+
+.matcha-snack-bar-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);
+}
+
+.matcha-snack-bar-description {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-md, 20px);
+}
+
+// ── CTA Action button — só flex-shrink (estilo vem do matcha-button). ──────
+.matcha-snack-bar-action {
+  flex-shrink: 0;
+}
+
+// ── Close icon-button — só flex-shrink (estilo vem do matcha-icon-button). ─
+.matcha-snack-bar-close {
+  flex-shrink: 0;
+}
+
+// ── Responsive (mobile: stretch full-width) ────────────────────────────────
+@include media-breakpoint('xs') {
+  matcha-snack-bar {
+    left: var(--matcha-space-200, 16px);
+    right: var(--matcha-space-200, 16px);
+    min-width: auto;
+    max-width: none;
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  matcha-snack-bar {
+    transition: none;
+  }
+}
+
+// =============================================================================
+// Theme mixin — status colors via [color] attr
+// =============================================================================
+
+@mixin matcha-snack-bar-theme($theme) {
+
+  matcha-snack-bar {
+
+    // ── Base (neutral / no specific status) ──
+    // Bg semi-transparente pro frosted glass (backdrop-filter) ter o que blurrar.
+    // Fallback sólido em browsers sem suporte (degrade gracioso via @supports).
+    .matcha-snack-bar-content {
+      background: var(--matcha-color-surface-card-alpha);
+      color: var(--matcha-color-fg);
+      border-color: var(--matcha-color-border);
+      box-shadow: var(--matcha-shadow-3);
+    }
+
+    // Fallback sólido pra browsers sem backdrop-filter.
+    @supports not (backdrop-filter: blur(1px)) {
+      .matcha-snack-bar-content {
+        background: var(--matcha-color-surface);
+      }
+    }
+
+    .matcha-snack-bar-title       { color: var(--matcha-color-fg); }
+    .matcha-snack-bar-description { color: var(--matcha-color-text-label); }
+
+    // ── Status — canon DSV3 (mesmo pattern do matcha-notification):
+    //    1. `border-left-color` → cor do status na borda esquerda
+    //    2. `--matcha-icon-color` → matcha-icon herda via custom property
+    //    3. `--matcha-button-color-*` no .matcha-snack-bar-action → matcha-button
+    //       (Outline SM) renderiza com border/text/state-layer todos na status color
+    //
+    // Reforça semantic: icon + border-left + CTA = mesma cor.
+
+    &[color="error"]   .matcha-snack-bar-content,
+    &[color="danger"]  .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-danger);
+      --matcha-icon-color: var(--matcha-color-danger);
+
+      .matcha-snack-bar-action {
+        --matcha-button-color: var(--matcha-color-danger);
+        --matcha-button-color-hover: var(--matcha-color-danger-hover);
+        --matcha-button-color-pressed: var(--matcha-color-danger-pressed);
+        --matcha-button-color-text-on: var(--matcha-color-danger-contrast);
+        --matcha-button-color-alpha: var(--matcha-color-danger-alpha);
+        --matcha-button-color-edge: var(--matcha-color-danger);
+        color: var(--matcha-color-danger);
+      }
+    }
+
+    &[color="warning"] .matcha-snack-bar-content,
+    &[color="warn"]    .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-warn);
+      --matcha-icon-color: var(--matcha-color-warn);
+
+      .matcha-snack-bar-action {
+        --matcha-button-color: var(--matcha-color-warn);
+        --matcha-button-color-hover: var(--matcha-color-warn-hover);
+        --matcha-button-color-pressed: var(--matcha-color-warn-pressed);
+        --matcha-button-color-text-on: var(--matcha-color-warn-contrast);
+        --matcha-button-color-alpha: var(--matcha-color-warn-alpha);
+        --matcha-button-color-edge: var(--matcha-color-warn);
+        color: var(--matcha-color-warn);
+      }
+    }
+
+    &[color="success"] .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-success);
+      --matcha-icon-color: var(--matcha-color-success);
+
+      .matcha-snack-bar-action {
+        --matcha-button-color: var(--matcha-color-success);
+        --matcha-button-color-hover: var(--matcha-color-success-hover);
+        --matcha-button-color-pressed: var(--matcha-color-success-pressed);
+        --matcha-button-color-text-on: var(--matcha-color-success-contrast);
+        --matcha-button-color-alpha: var(--matcha-color-success-alpha);
+        --matcha-button-color-edge: var(--matcha-color-success);
+        color: var(--matcha-color-success);
+      }
+    }
+
+    &[color="info"] .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-info);
+      --matcha-icon-color: var(--matcha-color-info);
+
+      .matcha-snack-bar-action {
+        --matcha-button-color: var(--matcha-color-info);
+        --matcha-button-color-hover: var(--matcha-color-info-hover);
+        --matcha-button-color-pressed: var(--matcha-color-info-pressed);
+        --matcha-button-color-text-on: var(--matcha-color-info-contrast);
+        --matcha-button-color-alpha: var(--matcha-color-info-alpha);
+        --matcha-button-color-edge: var(--matcha-color-info);
+        color: var(--matcha-color-info);
+      }
+    }
+
+    // Neutro — bg/border surface; icon + CTA mantêm cor padrão (não-status).
+    &[color="neutral"] .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-surface-border);
+      --matcha-icon-color: var(--matcha-color-icon-default);
+
+      .matcha-snack-bar-action {
+        color: var(--matcha-color-text-label);
+      }
+    }
+  }
+}