@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/app-page-header.scss

@@ -0,0 +1,260 @@
+@use "sass:map";
+
+// =============================================================================
+// app-page-header.scss
+//
+// Legacy `.matcha-header__*` — page-header da APP design-system (NÃO é o lib
+// component matcha-header). Mantido pra back-compat enquanto a app não migra
+// pro lib `<matcha-header>` com slots.
+//
+// Usado por:
+//   • src/app/layout/header/page-header.component.{html,scss}
+//   • src/app/pages/page-matcha-header (demos legacy)
+//   • src/app/pages/page-matcha-menu (demo de profile card)
+//
+// Para o componente canônico Figma DSV3 1:1, ver `matcha-header.scss`.
+// =============================================================================
+
+@mixin app-page-header-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    .matcha-header {
+        &__content {
+            background: var(--matcha-color-surface, #{getSurface($theme)});
+
+            &__title__icon {
+                color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+            }
+
+            &__options {
+                background: var(--matcha-color-surface, #{getSurface($theme)});
+            }
+        }
+
+        .matcha-header-church-id {
+            color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+        }
+
+        .matcha-header-user-name {
+            color: var(--matcha-color-fg, #{getForeground($theme)});
+        }
+
+        @include media-breakpoint('gt-sm') {
+            &__content {
+                background: var(--matcha-color-surface, #{getSurface($theme)});
+                &__options { background: transparent; }
+            }
+        }
+    }
+
+    .matcha-header-profile {
+        background: var(--matcha-color-surface, #{getSurface($theme)});
+        .profile-back  { color: var(--matcha-color-fg, #{getForeground($theme)}); &:hover { opacity: 0.8; } &: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); border-radius: var(--matcha-radius-md, 4px); } }
+        .profile-dates { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
+        .profile-name  { color: var(--matcha-color-fg, #{getForeground($theme)}); }
+        .profile-meta  { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
+        .profile-church { color: var(--matcha-color-fg, #{getForeground($theme)}); }
+        .profile-function-label { color: var(--matcha-color-accent, #{getAccent($theme)}); }
+        .profile-function-value { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
+        .profile-enrollment { color: var(--matcha-color-fg, #{getForeground($theme)}); }
+        .profile-edit  { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); cursor: pointer; &: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); } }
+    }
+}
+
+// ── Layout — page-header (legacy) ───────────────────────────────────────────
+
+.matcha-header {
+    &__content {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: var(--matcha-space-600, 48px);
+        padding: var(--matcha-space-100, 8px) var(--matcha-space-300, 24px) var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+        gap: var(--matcha-space-200, 16px);
+    }
+
+    .matcha-header-left {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-200, 16px);
+        flex: 1;
+        min-width: 0;
+    }
+
+    .matcha-header-right {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-200, 16px);
+    }
+
+    .matcha-header-user {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+        cursor: pointer;
+    }
+
+    .matcha-header-church-id {
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-p-tiny, 11px);
+        line-height: var(--matcha-leading-p-tiny, 14px);
+        letter-spacing: var(--matcha-letter-spacing-caption, 0.3px);
+        white-space: nowrap;
+    }
+
+    .matcha-header-user-name {
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-label-sm, 13px);
+        font-weight: var(--matcha-weight-medium, 500);
+        line-height: var(--matcha-leading-label-sm, 19px);
+        letter-spacing: var(--matcha-letter-spacing-button, 0.2px);
+        white-space: nowrap;
+    }
+}
+
+// ── Layout — Profile Card (legacy) ──────────────────────────────────────────
+
+.matcha-header-profile {
+    display: flex;
+    flex-direction: column;
+    gap: var(--matcha-space-200, 16px);
+    padding: var(--matcha-space-300, 24px);
+    border-radius: var(--matcha-radius-lg, 8px);
+    width: 100%;
+
+    .profile-nav {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--matcha-space-100, 8px);
+    }
+
+    .profile-back {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+        cursor: pointer;
+        border: none;
+        background: none;
+        padding: 0;
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-body-md, 14px);
+    }
+
+    .profile-dates {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-200, 16px);
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-body-md, 14px);
+        line-height: var(--matcha-leading-body-md, 20px);
+    }
+
+    .profile-row {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-200, 16px);
+        width: 100%;
+    }
+
+    .profile-info {
+        display: flex;
+        flex-direction: column;
+        gap: var(--matcha-space-050, 4px);
+        flex: 1;
+        min-width: 0;
+    }
+
+    .profile-name {
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-display, 32px);
+        font-weight: var(--matcha-weight-bold, 700);
+        line-height: var(--matcha-leading-display, 40px);
+    }
+
+    .profile-meta {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+        flex-wrap: wrap;
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-body-sm, 12px);
+        line-height: var(--matcha-leading-body-sm, 16px);
+    }
+
+    .profile-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+    }
+
+    .profile-church {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--matcha-space-100, 8px);
+        width: 100%;
+        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);
+    }
+
+    .profile-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--matcha-space-200, 16px);
+        width: 100%;
+    }
+
+    .profile-functions {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-050, 4px);
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-body-md, 14px);
+        line-height: var(--matcha-leading-body-md, 20px);
+    }
+
+    .profile-enrollment {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-body-md, 14px);
+        line-height: var(--matcha-leading-body-md, 20px);
+    }
+}
+
+// ── Responsive (legacy) ──
+@include media-breakpoint('xs') {
+    .matcha-header {
+        &__content {
+            height: var(--matcha-space-600, 48px);
+            padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+        }
+        .matcha-header-user-name { display: none; }
+    }
+
+    .matcha-header-profile {
+        .profile-nav { flex-direction: column; align-items: flex-start; }
+        .profile-dates { flex-wrap: wrap; }
+        .profile-row { flex-direction: column; align-items: flex-start; }
+        .profile-name {
+            font-size: var(--matcha-text-title-md, 18px);
+            font-weight: var(--matcha-weight-semibold, 600);
+            line-height: var(--matcha-leading-title-md, 24px);
+        }
+        .profile-footer { flex-direction: column; align-items: flex-start; gap: var(--matcha-space-100, 8px); }
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .matcha-header-profile .profile-edit,
+    .matcha-header-profile .profile-back {
+        transition: none;
+    }
+}