@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-footer.scss

@@ -1,187 +1,90 @@
 @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)
+// matcha-footer.scss — App footer bar
+// 1:1 com Figma DSV3 matcha/footer (nodeId 15930:27)
+//   • Default  · w fluida · h 28 · padding 8/16
+//   • Expanded · w fluida · h 28 · padding 8/16
+//   • Mobile   · w fluida · h 24 · padding 6/16
+//   • bg surface/card  · border-top hairline surface/border
+//   • topLeftRadius/topRightRadius = 8 · bottom = 0
+//   • Conteúdo centralizado (brand inchurch via matcha-brand)
 // =============================================================================
 
 @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;
+    .matcha-footer {
+        background: var(--matcha-color-surface-card);
+        border-top: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+        color: var(--matcha-color-text-label);
     }
-
-    &: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;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    // Gap default — footer nunca colado no conteúdo nem nas bordas.
+    // Tokens: --matcha-footer-gap-block (top) e --matcha-footer-gap-inline (laterais).
+    // Fallback unificado --matcha-footer-gap controla os 3 simultaneamente.
+    margin-block-start: var(--matcha-footer-gap-block, var(--matcha-footer-gap, var(--matcha-space-300, 24px)));
+    margin-inline: var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-300, 24px)));
+    // max(0, ...) protege de width negativo se container <= 2 * gap-inline.
+    width: max(0px, calc(100% - 2 * var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-300, 24px)))));
+    // Figma DSV3 Default/Expanded: h 28, padding 8/16. Logical props pra RTL.
+    min-block-size: var(--matcha-footer-height, 28px);
+    padding-block: var(--matcha-space-100, 8px);
+    padding-inline: var(--matcha-space-200, 16px);
+    // Top corners arredondados (Figma DSV3 topLeftRadius/topRightRadius = 8).
+    border-start-start-radius: var(--matcha-radius-lg, 8px);
+    border-start-end-radius:   var(--matcha-radius-lg, 8px);
+    border-end-start-radius:   0;
+    border-end-end-radius:     0;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-sm, 12px);
+    line-height: var(--matcha-leading-body-sm, 16px);
 }
 
-.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;
+// ── Forced colors (Windows High Contrast) ──────────────────────────────────
+// Border hairline com surface/border (12% opacidade) pode sumir em high-contrast.
+// CanvasText é o token system semantic — sempre visível.
+@media (forced-colors: active) {
+    .matcha-footer {
+        border-top: 1px solid CanvasText;
+    }
 }
 
-.matcha-footer__version {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-xs, 10px);
-  line-height: 1.4;
-  white-space: nowrap;
+// ── Reduced motion (defensivo) ──────────────────────────────────────────────
+// Hoje footer não tem transitions, mas mantemos o block pra futuro (sticky
+// shadow, scroll-shrink) — quando adicionar, já está coberto.
+@media (prefers-reduced-motion: reduce) {
+    .matcha-footer {
+        transition: none !important;
+        animation: none !important;
+    }
 }
 
-// ── 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;
-  }
+// ── Print ──────────────────────────────────────────────────────────────────
+// Convenção DS: chrome (header/footer) some em impressão, conteúdo full-page.
+@media print {
+    .matcha-footer {
+        display: none;
+    }
 }
 
 // ── 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;
-  }
+    .matcha-footer {
+        // Figma DSV3 Mobile: h 24, padding 6/16. Gap reduzido em mobile.
+        min-block-size: 24px;
+        padding-block: var(--matcha-space-075, 6px);
+        padding-inline: var(--matcha-space-200, 16px);
+        margin-block-start: var(--matcha-footer-gap-block, var(--matcha-footer-gap, var(--matcha-space-200, 16px)));
+        margin-inline: var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-200, 16px)));
+        width: max(0px, calc(100% - 2 * var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-200, 16px)))));
+    }
 }

package/components/matcha-form-field.scss

@@ -516,16 +516,16 @@ matcha-form-field[readonly="true"] .matcha-form-field {
         input[type="date"],
         input[type="time"],
         textarea {
-            color: var(--matcha-color-text-primary, #{getForeground($theme)});
+            color: var(--matcha-color-text-primary);
 
             &::placeholder {
-                color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+                color: var(--matcha-color-text-placeholder);
             }
         }
 
         input:disabled,
         textarea:disabled {
-            color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+            color: var(--matcha-color-interaction-disabled-fg);
         }
 
         // Disabled: muted text, cursor not-allowed (sinalização inequívoca de "não pode interagir").
@@ -550,3 +550,55 @@ matcha-form-field[readonly="true"] .matcha-form-field {
         @include generate-matcha-form-field-size-classes($helper-breakpoints);
     }
 }
+
+// ── Forced colors ──
+// Field precisa border + bg explícitos pra ser visível como input.
+@media (forced-colors: active) {
+    matcha-form-field {
+        .matcha-field-control,
+        .matcha-form-field__control {
+            border: 1px solid CanvasText !important;
+            background: Canvas !important;
+            color: CanvasText !important;
+        }
+
+        // Estado focused
+        &.is-focused .matcha-field-control,
+        &.is-focused .matcha-form-field__control,
+        .matcha-field-control:focus-within,
+        .matcha-form-field__control:focus-within {
+            outline: 2px solid CanvasText !important;
+            outline-offset: 2px;
+        }
+
+        // Estado erro/invalid
+        &.is-invalid .matcha-field-control,
+        &.has-error .matcha-form-field__control {
+            border-color: CanvasText !important;
+            border-width: 2px !important;
+        }
+
+        &[disabled],
+        &.is-disabled {
+            opacity: 0.5;
+
+            .matcha-field-control,
+            .matcha-form-field__control {
+                border-color: GrayText !important;
+                color: GrayText !important;
+            }
+        }
+    }
+}
+
+// ── Print ──
+// Form fields preservam estado (form values). Sem fundo decorativo.
+@media print {
+    matcha-form-field {
+        .matcha-field-control,
+        .matcha-form-field__control {
+            border: 1px solid currentColor !important;
+            background: transparent !important;
+        }
+    }
+}

package/components/matcha-form-section.scss

@@ -1,101 +1,100 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-form-section.scss — Form section divider for CRUD pages
-// Aligned with Figma matcha/form-section:
-//   Tipo(3: Section, Sub-section, Section + Descrição)
-// Usage: Inline divider inside form flows to group related fields
-// NOT a card — just a heading row with accent indicator
-// =============================================================================
-
-@mixin matcha-form-section-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  // ── Section (accent bar + title) ──
-  .matcha-form-section {
-    .matcha-form-section__bar {
-      background: var(--matcha-color-accent, #{getAccent($theme)});
-    }
-
-    .matcha-form-section__title {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-
-    .matcha-form-section__description {
-      color: var(--matcha-color-text-secondary, #{getBlueGrey($theme)});
-    }
-  }
-
-  // ── Sub-section (bullet + title) ──
-  .matcha-form-subsection {
-    .matcha-form-subsection__bullet {
-      background: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-
-    .matcha-form-subsection__title {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-  }
-}
-
-// ── Section Layout ─────────────────────────────────────────────────────────
-
-.matcha-form-section {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--matcha-space-150, 12px);
-  width: 100%;
-}
-
-.matcha-form-section__bar {
-  width: var(--matcha-border-medium, 4px);
-  align-self: stretch;
-  border-radius: var(--matcha-radius-sm, 2px);
-  flex-shrink: 0;
-  min-height: var(--matcha-space-250, 20px);
-}
-
-.matcha-form-section__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-050, 4px);
-  flex: 1;
-  min-width: 0;
-}
-
-.matcha-form-section__title {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-title-sm, 16px);
-  font-weight: var(--matcha-weight-semibold, 600);
-  line-height: var(--matcha-leading-title-sm, 22px);
-}
-
-.matcha-form-section__description {
-  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);
-}
-
-// ── Sub-section Layout ─────────────────────────────────────────────────────
-
-.matcha-form-subsection {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  width: 100%;
-}
-
-.matcha-form-subsection__bullet {
-  width: 6px;
-  height: 6px;
-  border-radius: var(--matcha-radius-pill, 9999px);
-  flex-shrink: 0;
-}
-
-.matcha-form-subsection__title {
-  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);
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-form-section.scss — Form section divider for CRUD pages
+// Aligned with Figma matcha/form-section:
+//   Tipo(3: Section, Sub-section, Section + Descrição)
+// Usage: Inline divider inside form flows to group related fields
+// NOT a card — just a heading row with accent indicator
+// =============================================================================
+
+@mixin matcha-form-section-theme($theme) {
+
+  // ── Section (accent bar + title) ──
+  .matcha-form-section {
+    .matcha-form-section__bar {
+      background: var(--matcha-color-accent);
+    }
+
+    .matcha-form-section__title {
+      color: var(--matcha-color-fg);
+    }
+
+    .matcha-form-section__description {
+      color: var(--matcha-color-text-secondary);
+    }
+  }
+
+  // ── Sub-section (bullet + title) ──
+  .matcha-form-subsection {
+    .matcha-form-subsection__bullet {
+      background: var(--matcha-color-fg);
+    }
+
+    .matcha-form-subsection__title {
+      color: var(--matcha-color-fg);
+    }
+  }
+}
+
+// ── Section Layout ─────────────────────────────────────────────────────────
+
+.matcha-form-section {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--matcha-space-150, 12px);
+  width: 100%;
+}
+
+.matcha-form-section__bar {
+  width: var(--matcha-border-medium, 4px);
+  align-self: stretch;
+  border-radius: var(--matcha-radius-sm, 2px);
+  flex-shrink: 0;
+  min-height: var(--matcha-space-250, 20px);
+}
+
+.matcha-form-section__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-050, 4px);
+  flex: 1;
+  min-width: 0;
+}
+
+.matcha-form-section__title {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-title-sm, 16px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: var(--matcha-leading-title-sm, 22px);
+}
+
+.matcha-form-section__description {
+  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);
+}
+
+// ── Sub-section Layout ─────────────────────────────────────────────────────
+
+.matcha-form-subsection {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  width: 100%;
+}
+
+.matcha-form-subsection__bullet {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  flex-shrink: 0;
+}
+
+.matcha-form-subsection__title {
+  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);
+}