@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/app-page-header.scss

@@ -1,260 +1,260 @@
-@use "../abstracts/media-breakpoint" as *;
-@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) {
-
-    .matcha-header {
-        &__content {
-            background: var(--matcha-color-surface);
-
-            &__title__icon {
-                color: var(--matcha-color-text-label);
-            }
-
-            &__options {
-                background: var(--matcha-color-surface);
-            }
-        }
-
-        .matcha-header-church-id {
-            color: var(--matcha-color-text-placeholder);
-        }
-
-        .matcha-header-user-name {
-            color: var(--matcha-color-fg);
-        }
-
-        @include media-breakpoint('gt-sm') {
-            &__content {
-                background: var(--matcha-color-surface);
-                &__options { background: transparent; }
-            }
-        }
-    }
-
-    .matcha-header-profile {
-        background: var(--matcha-color-surface);
-        .profile-back  { color: var(--matcha-color-fg); &:hover { opacity: 0.8; } &:focus-visible { outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent); outline-offset: var(--matcha-state-focus-ring-offset, 2px); border-radius: var(--matcha-radius-md, 4px); } }
-        .profile-dates { color: var(--matcha-color-text-label); }
-        .profile-name  { color: var(--matcha-color-fg); }
-        .profile-meta  { color: var(--matcha-color-text-label); }
-        .profile-church { color: var(--matcha-color-fg); }
-        .profile-function-label { color: var(--matcha-color-accent); }
-        .profile-function-value { color: var(--matcha-color-text-label); }
-        .profile-enrollment { color: var(--matcha-color-fg); }
-        .profile-edit  { color: var(--matcha-color-text-label); cursor: pointer; &:hover { color: var(--matcha-color-fg); } &:focus-visible { outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent); 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;
-    }
-}
+@use "../abstracts/media-breakpoint" as *;
+@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) {
+
+    .matcha-header {
+        &__content {
+            background: var(--matcha-color-surface);
+
+            &__title__icon {
+                color: var(--matcha-color-text-label);
+            }
+
+            &__options {
+                background: var(--matcha-color-surface);
+            }
+        }
+
+        .matcha-header-church-id {
+            color: var(--matcha-color-text-placeholder);
+        }
+
+        .matcha-header-user-name {
+            color: var(--matcha-color-fg);
+        }
+
+        @include media-breakpoint('gt-sm') {
+            &__content {
+                background: var(--matcha-color-surface);
+                &__options { background: transparent; }
+            }
+        }
+    }
+
+    .matcha-header-profile {
+        background: var(--matcha-color-surface);
+        .profile-back  { color: var(--matcha-color-fg); &:hover { opacity: 0.8; } &:focus-visible { outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent); outline-offset: var(--matcha-state-focus-ring-offset, 2px); border-radius: var(--matcha-radius-md, 4px); } }
+        .profile-dates { color: var(--matcha-color-text-label); }
+        .profile-name  { color: var(--matcha-color-fg); }
+        .profile-meta  { color: var(--matcha-color-text-label); }
+        .profile-church { color: var(--matcha-color-fg); }
+        .profile-function-label { color: var(--matcha-color-accent); }
+        .profile-function-value { color: var(--matcha-color-text-label); }
+        .profile-enrollment { color: var(--matcha-color-fg); }
+        .profile-edit  { color: var(--matcha-color-text-label); cursor: pointer; &:hover { color: var(--matcha-color-fg); } &:focus-visible { outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent); 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;
+    }
+}