@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-panel.scss

@@ -6,7 +6,8 @@
     inset: 0;
     width: 100%;
     height: 100%;
-    z-index: 10001;
+    // Acima de modal (999) e overlay base (1000) — panel pode ser aberto dentro de modal
+    z-index: var(--matcha-z-popover-floating, 10001);
     pointer-events: none !important; // Permite clicar "através" do overlay (interação com inputs, scroll da página)
     display: block;
 }
@@ -20,22 +21,21 @@
 }
 
 .matcha-panel {
-    // Figma matcha/panel: radius 16 (xl), pad 8/0
+    // Figma matcha/panel (14276:67): radius xl, padding 8/0, max-height 280
     border-radius: var(--matcha-radius-xl, 16px);
     overflow-y: auto;
     display: flex;
     flex-direction: column;
-    max-height: 280px;
+    max-height: var(--matcha-panel-max-height, 280px);
     width: 100%;
     padding: var(--matcha-space-100, 8px) 0;
 
-    // Animações (fade + scale leve, curva Material standard)
+    // Animações (fade + scale leve, easing standard)
     opacity: 0;
-    transform: scale(0.96) translateY(-4px);
-    transition: opacity var(--matcha-duration-fast, 200ms) cubic-bezier(0.4, 0, 0.2, 1),
-                transform var(--matcha-duration-fast, 200ms) cubic-bezier(0.4, 0, 0.2, 1);
+    transform: scale(0.96) translateY(calc(-1 * var(--matcha-space-050, 4px)));
+    transition: opacity var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+                transform var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
 
-    // Position relative (agora contido no pane)
     position: relative;
     z-index: auto;
 
@@ -88,12 +88,12 @@
 // ── Bottom-sheet em mobile (≤ 600px) ────────────────────────
 // O panel com calendar vira um painel full-width grudado no rodapé da tela,
 // com backdrop translúcido e slide-up. Sobrescreve o transform inline do JS.
-@media (max-width: 600px) {
+@media (max-width: 639px) {
     .matcha-panel-overlay:has(.matcha-calendar) {
         pointer-events: auto !important;                   // precisa capturar o backdrop
-        background: rgba(0, 0, 0, 0.4);                    // backdrop
-        backdrop-filter: blur(2px);
-        animation: matcha-panel-backdrop-fade 180ms cubic-bezier(0.4, 0, 0.2, 1);
+        background: var(--matcha-scrim-drawer, rgba(0, 0, 0, 0.3));
+        backdrop-filter: blur(var(--matcha-scrim-drawer-blur, 4px));
+        animation: matcha-panel-backdrop-fade var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
     }
 
     .matcha-panel-pane:has(.matcha-calendar) {
@@ -107,7 +107,7 @@
         min-width: 0 !important;
         transform: none !important;
         max-height: 90vh;
-        animation: matcha-panel-sheet-up 220ms cubic-bezier(0.4, 0, 0.2, 1);
+        animation: matcha-panel-sheet-up var(--matcha-duration-normal, 220ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
     }
 
     // Cartão do calendar ocupa a largura toda, com radius só em cima
@@ -138,30 +138,45 @@
 }
 
 @mixin matcha-panel-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     .matcha-panel {
-        background: var(--matcha-color-surface, #{getSurface($theme)});
-        color: var(--matcha-color-fg, #{getForeground($theme)});
+        // Floating overlay (dropdown/popover) — surface-card-strong (pure white
+        // light, lifted dark). Inline cards usam soft default; panel flutua.
+        background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card, var(--matcha-color-surface)));
+        color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
-        // Shadow level 2 (menus, floating)
-        box-shadow: var(--matcha-shadow-2, #{if($is-dark, $shadow-2-dark, $shadow-2-light)});
-
-        @if $is-dark {
-            border: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.1);
-        }
+        // Shadow level 3 (floating panels — Figma DSV3 elevation/level-3)
+        box-shadow: var(--matcha-shadow-3);
+        border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
 
         &:focus-within {
-            box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+            box-shadow: var(--matcha-shadow-4);
         }
     }
 
-    // Responsividade (mantida aqui ou movida para global dependendo da necessidade de tokens)
+    // Responsividade — em mobile, panel mais compacto
     @media (max-width: 768px) {
         .matcha-panel {
-            max-height: 200px;
-            min-width: 120px;
-            border-radius: var(--matcha-radius-md, 4px);
+            max-height: var(--matcha-space-1600, 192px);
+            min-width:  var(--matcha-space-1200, 96px);
+            border-radius: var(--matcha-radius-lg, 12px);
         }
     }
 }
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    .matcha-panel {
+        background: Canvas !important;
+        border: 1px solid CanvasText !important;
+        box-shadow: none !important;
+    }
+}
+
+// ── Print ──
+// Panels são floating/popover — somem em papel.
+@media print {
+    .matcha-panel {
+        display: none !important;
+    }
+}

package/components/matcha-profile-card.scss

@@ -1,50 +1,50 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-profile-card.scss — Compact profile card (avatar + name + role)
-// Aligned with Figma matcha/profile-card:
-//   Layout: avatar (40px) + text (name + role) — horizontal, pill radius
-//   Used in: headers, sidebars, user menus
-// Angular: matcha-profile-card
-// =============================================================================
-
-@mixin matcha-profile-card-theme($theme) {
-  .matcha-profile-card {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-  }
-
-  .matcha-profile-card__name {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-  }
-
-  .matcha-profile-card__role {
-    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-profile-card {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-200, 16px);
-  padding: var(--matcha-space-100, 8px) var(--matcha-space-300, 24px) var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
-  border-radius: var(--matcha-radius-pill, 9999px);
-}
-
-.matcha-profile-card__name {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: var(--matcha-weight-medium, 500);
-  line-height: var(--matcha-leading-body-md, 20px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.matcha-profile-card__role {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-caption, 11px);
-  line-height: var(--matcha-leading-caption, 14px);
-  white-space: nowrap;
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-profile-card.scss — Compact profile card (avatar + name + role)
+// Aligned with Figma matcha/profile-card:
+//   Layout: avatar (40px) + text (name + role) — horizontal, pill radius
+//   Used in: headers, sidebars, user menus
+// Angular: matcha-profile-card
+// =============================================================================
+
+@mixin matcha-profile-card-theme($theme) {
+  .matcha-profile-card {
+    color: var(--matcha-color-fg);
+  }
+
+  .matcha-profile-card__name {
+    color: var(--matcha-color-fg);
+  }
+
+  .matcha-profile-card__role {
+    color: var(--matcha-color-text-hint);
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-profile-card {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-200, 16px);
+  padding: var(--matcha-space-100, 8px) var(--matcha-space-300, 24px) var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+  border-radius: var(--matcha-radius-pill, 9999px);
+}
+
+.matcha-profile-card__name {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-body-md, 20px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.matcha-profile-card__role {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-p-tiny, 11px);
+  line-height: var(--matcha-leading-p-tiny, 14px);
+  white-space: nowrap;
+}