@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-notification.scss

@@ -1,197 +1,412 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-notification.scss — In-page notification banner / alert
-// Aligned with Figma matcha/notification:
-//   Status(5: Erro, Alerta, Sucesso, Ideia, Neutro)
-//   × Slots: icon, title, description, CTA button, close
-// Angular: matcha-notification
-// =============================================================================
-
-@mixin matcha-notification-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  .matcha-notification {
-    // ── Base text colors ──
-    .matcha-notification__title {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-
-    .matcha-notification__description {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-    }
-
-    .matcha-notification__close {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-
-      &:hover {
-        color: var(--matcha-color-fg, #{getForeground($theme)});
-      }
-
-      &: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);
-      }
-    }
-
-    // ── Status: Erro ──
-    &.matcha-notification--error {
-      background: var(--matcha-color-feedback-danger-alpha, #{getDangerAlpha($theme)});
-      border-left-color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
-
-      .matcha-notification__icon {
-        color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
-      }
-    }
-
-    // ── Status: Alerta ──
-    &.matcha-notification--warning {
-      background: var(--matcha-color-feedback-warn-alpha, #{getWarnAlpha($theme)});
-      border-left-color: var(--matcha-color-feedback-warn, #{getWarn($theme)});
-
-      .matcha-notification__icon {
-        color: var(--matcha-color-feedback-warn, #{getWarn($theme)});
-      }
-    }
-
-    // ── Status: Sucesso ──
-    &.matcha-notification--success {
-      background: var(--matcha-color-feedback-success-alpha, #{getSuccessAlpha($theme)});
-      border-left-color: var(--matcha-color-feedback-success, #{getSuccess($theme)});
-
-      .matcha-notification__icon {
-        color: var(--matcha-color-feedback-success, #{getSuccess($theme)});
-      }
-    }
-
-    // ── Status: Ideia / Info ──
-    &.matcha-notification--info {
-      background: var(--matcha-color-feedback-info-alpha, #{getInfoAlpha($theme)});
-      border-left-color: var(--matcha-color-feedback-info, #{getInfo($theme)});
-
-      .matcha-notification__icon {
-        color: var(--matcha-color-feedback-info, #{getInfo($theme)});
-      }
-    }
-
-    // ── Status: Neutro ──
-    &.matcha-notification--neutral {
-      background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
-      border-left-color: var(--matcha-color-border, #{getGrey($theme)});
-
-      .matcha-notification__icon {
-        color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-      }
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-notification {
-  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-left: var(--matcha-border-medium, 4px) solid transparent;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.matcha-notification__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);
-}
-
-.matcha-notification__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-050, 4px);
-  flex: 1;
-  min-width: 0;
-}
-
-.matcha-notification__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-notification__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);
-}
-
-.matcha-notification__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  flex-shrink: 0;
-}
-
-.matcha-notification__close {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  border-radius: var(--matcha-radius-pill, 9999px);
-  position: relative;
-  overflow: hidden;
-  transition: color var(--matcha-duration-instant, 80ms) linear;
-
-  // State layer
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: currentColor;
-    opacity: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    transition: opacity var(--matcha-duration-instant, 80ms) linear;
-  }
-  &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-  &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
-}
-
-// ── Responsive ──────────────────────────────────────────────────────────────
-
-@include media-breakpoint('xs') {
-  .matcha-notification {
-    flex-wrap: wrap;
-    gap: var(--matcha-space-100, 8px);
-    padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
-  }
-
-  .matcha-notification__body {
-    flex-basis: calc(100% - 56px); // icon + gap
-  }
-
-  .matcha-notification__actions {
-    width: 100%;
-    justify-content: flex-end;
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-
-@media (prefers-reduced-motion: reduce) {
-  .matcha-notification__close,
-  .matcha-notification__close::before {
-    transition: none;
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-notification.scss — In-page notification banner / alert
+// Aligned with Figma matcha/notification:
+//   Status(5: Erro, Alerta, Sucesso, Ideia, Neutro)
+//   × Slots: icon, title, description, CTA button, close
+// Angular: matcha-notification
+// =============================================================================
+
+@mixin matcha-notification-theme($theme) {
+
+  // Title sempre text-primary, description sempre text-secondary (Figma DSV3).
+  // Texto fica legível porque bg é alpha 10% — usuário lê o texto sobre o
+  // surface real, não sobre a tinta.
+  .matcha-notification__title {
+    color: var(--matcha-color-text-primary);
+  }
+
+  .matcha-notification__description {
+    color: var(--matcha-color-text-secondary);
+  }
+
+  // Close icon — color icon/default (token DSV3 #5f656b light / #9aa0a6 dark).
+  .matcha-notification__close {
+    color: var(--matcha-color-icon-default, var(--matcha-color-text-secondary));
+
+    &:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+  }
+
+  // ── Status × cores (Figma 1:1) ──
+  // Tokens canon: --matcha-color-{danger|warn|success|info} (sem prefix "feedback-").
+  // --matcha-icon-color cascateia pros matcha-icon (filhos do banner).
+  // --matcha-button-color* setado em button[matcha-notification-action] — selector
+  // mais específico que o default do button[matcha-button] (vence cascade).
+  .matcha-notification--error {
+    background: var(--matcha-color-danger-alpha);
+    border-left-color: var(--matcha-color-danger);
+    --matcha-icon-color: var(--matcha-color-danger);
+
+    button[matcha-notification-action],
+    a[matcha-notification-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);
+    }
+  }
+
+  .matcha-notification--warning {
+    background: var(--matcha-color-warn-alpha);
+    border-left-color: var(--matcha-color-warn);
+    --matcha-icon-color: var(--matcha-color-warn);
+
+    button[matcha-notification-action],
+    a[matcha-notification-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);
+    }
+  }
+
+  .matcha-notification--success {
+    background: var(--matcha-color-success-alpha);
+    border-left-color: var(--matcha-color-success);
+    --matcha-icon-color: var(--matcha-color-success);
+
+    button[matcha-notification-action],
+    a[matcha-notification-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);
+    }
+  }
+
+  .matcha-notification--info {
+    background: var(--matcha-color-info-alpha);
+    border-left-color: var(--matcha-color-info);
+    --matcha-icon-color: var(--matcha-color-info);
+
+    button[matcha-notification-action],
+    a[matcha-notification-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 surface/bg-alpha (50%) + border surface/border + icon/CTA neutros.
+  .matcha-notification--neutral {
+    background: var(--matcha-color-surface-bg-alpha);
+    border-left-color: var(--matcha-color-surface-border);
+    --matcha-icon-color: var(--matcha-color-icon-default);
+
+    button[matcha-notification-action],
+    a[matcha-notification-action] {
+      --matcha-button-color-edge: var(--matcha-color-text-secondary);
+      color: var(--matcha-color-text-secondary);
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+// Notification — Figma DSV3 1:1 (matcha/notification 15955:692):
+// Layout HORIZONTAL · pad/gap por size variant · radius 8.
+// Bg ALPHA 10% (subtle tint) + border-left 4px (status color) + elevation level-2.
+// Texto fica legível sobre surface real (bg apenas tinta sutil).
+//
+// Sizes (canon DSV3):
+//   sm — pad 6/12, gap 8, font body-sm 12/16 (forms compactos, drawer)
+//   md — pad 12/16, gap 12, font body-md 14/20 (default)
+//   lg — pad 20/24, gap 20, font body-lg 16/24 (hero, dashboard top)
+.matcha-notification {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-150, 12px);
+  padding-block: var(--matcha-space-150, 12px);
+  padding-inline: var(--matcha-space-200, 16px);
+  border-radius: var(--matcha-radius-lg, 8px);
+  border-left: var(--matcha-border-medium, 4px) solid transparent;
+  box-shadow: var(--matcha-shadow-2, 0 4px 16px -2px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04));
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;  // contém o countdown bar absolute
+
+  // sm — compact pra forms densos / drawer
+  &[size="sm"] {
+    gap: var(--matcha-space-100, 8px);
+    padding-block: var(--matcha-space-075, 6px);
+    padding-inline: var(--matcha-space-150, 12px);
+
+    .matcha-notification__title,
+    .matcha-notification__description {
+      font-size: var(--matcha-text-body-sm, 12px);
+      line-height: var(--matcha-leading-body-sm, 16px);
+    }
+    .matcha-notification__media-default {
+      width: var(--matcha-icon-size-sm, 20px);
+      height: var(--matcha-icon-size-sm, 20px);
+    }
+  }
+
+  // lg — hero / dashboard top
+  &[size="lg"] {
+    gap: var(--matcha-space-250, 20px);
+    padding-block: var(--matcha-space-250, 20px);
+    padding-inline: var(--matcha-space-300, 24px);
+
+    .matcha-notification__title,
+    .matcha-notification__description {
+      font-size: var(--matcha-text-body-lg, 16px);
+      line-height: var(--matcha-leading-body-lg, 24px);
+    }
+    .matcha-notification__media-default {
+      width: var(--matcha-icon-size-lg, 28px);
+      height: var(--matcha-icon-size-lg, 28px);
+    }
+  }
+}
+
+// ── Media slot ──
+// Slot wrapper. Tem 2 children possíveis:
+//   1. consumer projetado via [matcha-notification-media] (matcha-icon-badge, etc)
+//   2. fallback __media-default (matcha-icon do status)
+// CSS esconde o fallback quando há projected content.
+.matcha-notification__media {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.matcha-notification__media-default {
+  width: var(--matcha-icon-size-md, 24px);
+  height: var(--matcha-icon-size-md, 24px);
+}
+
+// Hide fallback default icon when consumer projeta media slot.
+// `:has` é resolved no parent — checa se há filho com attr [matcha-notification-media].
+.matcha-notification__media:has([matcha-notification-media]) .matcha-notification__media-default {
+  display: none;
+}
+
+// ── Body ──
+.matcha-notification__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-050, 4px);
+  flex: 1;
+  min-width: 0;
+
+  // Body inteiro some se nenhum slot interno tem conteúdo.
+  &:not(:has(.matcha-notification__title > *, .matcha-notification__description > *)) {
+    display: none;
+  }
+}
+
+// Title — slot semibold (distinção tipográfica do description).
+.matcha-notification__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);
+  color: var(--matcha-notification-title-color, var(--matcha-color-text-primary));
+
+  &:not(:has(*)) { display: none; }
+}
+
+.matcha-notification__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);
+  color: var(--matcha-notification-description-color, var(--matcha-color-text-secondary));
+
+  &:not(:has(*)):empty { display: none; }
+}
+
+// ── Actions slot (CTAs) ──
+.matcha-notification__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  flex-shrink: 0;
+
+  &:not(:has(*)) { display: none; }
+}
+
+// ── Countdown bar (autoDismiss > 0) ──
+// Bar 2px na base, scaleX(progress) — visual de "tempo esgotando".
+.matcha-notification__countdown {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  height: var(--matcha-border-thin, 2px);
+  background: currentColor;
+  color: var(--matcha-color-info);  // sobrescrito pelo status modifier (abaixo)
+  transform-origin: left center;
+  transition: transform var(--matcha-duration-instant, 80ms) linear;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.matcha-notification--error   .matcha-notification__countdown { color: var(--matcha-color-danger); }
+.matcha-notification--warning .matcha-notification__countdown { color: var(--matcha-color-warn); }
+.matcha-notification--success .matcha-notification__countdown { color: var(--matcha-color-success); }
+.matcha-notification--info    .matcha-notification__countdown { color: var(--matcha-color-info); }
+.matcha-notification--neutral .matcha-notification__countdown { color: var(--matcha-color-text-secondary); }
+
+.matcha-notification__close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  position: relative;
+  overflow: hidden;
+  transition: color var(--matcha-duration-instant, 80ms) linear;
+
+  // State layer
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: currentColor;
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity var(--matcha-duration-instant, 80ms) linear;
+  }
+  &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+  &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+}
+
+// ── Mobile (≤599px) ─────────────────────────────────────────────────────
+// Stack vertical (mesmo padrão do matcha-banner mobile):
+//   [icon na 1ª linha (align-self start)]
+//   → [body (title + description)]
+//   → [CTA action alinhado à esquerda, natural width]
+//   close vira absolute top-right (não compete por espaço no flow).
+//
+// `.is-mobile-preview` aplica os mesmos rules em qualquer viewport — útil pra
+// demonstrar o layout mobile em pages de documentação sem redimensionar.
+@mixin matcha-notification-mobile {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--matcha-space-150, 12px);
+  padding-block: var(--matcha-space-150, 12px);
+  padding-inline: var(--matcha-space-200, 16px);
+  padding-right: var(--matcha-space-500, 40px); // reserva espaço pro close absolute
+  // position: relative já no host (containment do countdown bar)
+
+  // Media na sua própria linha, alinhado à esquerda (não centralizado).
+  .matcha-notification__media {
+    align-self: flex-start;
+  }
+
+  // Body ocupa largura total da coluna.
+  .matcha-notification__body {
+    width: 100%;
+    min-width: 0;
+  }
+
+  // Actions wrapper full-width pra acomodar CTAs.
+  .matcha-notification__actions {
+    width: 100%;
+  }
+
+  // CTA actions alinhados à esquerda no natural width.
+  button[matcha-notification-action],
+  a[matcha-notification-action] {
+    align-self: flex-start;
+  }
+
+  // Close: top-right absolute, fora do flow vertical.
+  .matcha-notification__close {
+    position: absolute;
+    top: var(--matcha-space-100, 8px);
+    right: var(--matcha-space-100, 8px);
+    z-index: 2;
+  }
+}
+
+@include media-breakpoint('xs') {
+  .matcha-notification { @include matcha-notification-mobile; }
+}
+
+.matcha-notification.is-mobile-preview {
+  @include matcha-notification-mobile;
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-notification__close,
+  .matcha-notification__close::before {
+    transition: none;
+  }
+
+  // Countdown bar visual some — auto-dismiss continua, só sem ticking visual.
+  .matcha-notification__countdown {
+    transition: none;
+    display: none;
+  }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+// Bg alpha + shadow ficam invisíveis. Border-left vira solid CanvasText
+// e ganha border full pra delimitar visualmente.
+@media (forced-colors: active) {
+  .matcha-notification {
+    background: Canvas;
+    border: 1px solid CanvasText;
+    border-left-width: 4px;
+    box-shadow: none;
+    color: CanvasText;
+  }
+
+  .matcha-notification__icon { color: CanvasText; }
+  .matcha-notification__title { color: CanvasText; }
+  .matcha-notification__description { color: CanvasText; }
+
+  .matcha-notification__close {
+    color: CanvasText;
+
+    &:focus-visible {
+      outline: 2px solid CanvasText;
+    }
+  }
+}
+
+// ── Print ──
+// Notification é informacional — mantém visível, sem bg/shadow.
+@media print {
+  .matcha-notification {
+    background: transparent;
+    box-shadow: none;
+    border: 1px solid currentColor;
+    border-left-width: 4px;
+    break-inside: avoid;
+  }
+
+  .matcha-notification__close {
+    display: none;
+  }
+}