@inchurch/matcha-theme 20.0.3

package/components/matcha-drawer.scss

@@ -0,0 +1,235 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-drawer.scss — Drawer / Sidenav (over, push, side)
+// =============================================================================
+
+// ── Animations ──────────────────────────────────────────────────────────────
+
+@keyframes matcha-drawer-backdrop-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes matcha-drawer-backdrop-out {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    matcha-drawer,
+    .matcha-drawer-backdrop,
+    matcha-drawer-content {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-drawer-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    // ── Container ──
+    matcha-drawer-container {
+        display: block;
+        position: relative;
+        z-index: 1;
+        box-sizing: border-box;
+        -webkit-overflow-scrolling: touch;
+        overflow: hidden;
+        background-color: var(--matcha-color-bg, #{getBackground($theme)});
+        color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    // ── Backdrop ──
+    .matcha-drawer-backdrop {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+        display: block;
+        visibility: hidden;
+        cursor: pointer;
+        // Figma matcha/overlay Type=Drawer: scrim 30% + blur 4px
+        background-color: var(--matcha-scrim-drawer, rgba(0, 0, 0, 0.3));
+        backdrop-filter: blur(var(--matcha-scrim-drawer-blur, 4px));
+        opacity: 0;
+        transition: opacity var(--matcha-duration-normal, 200ms) ease,
+                    visibility var(--matcha-duration-normal, 200ms) ease;
+    }
+
+    // Backdrop visible
+    matcha-drawer-container.matcha-drawer-container-has-open .matcha-drawer-backdrop {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    // ── Content container ──
+    .matcha-drawer-content-container {
+        position: relative;
+        z-index: 0;
+        display: block;
+        height: 100%;
+        overflow: auto;
+    }
+
+    // ── Drawer ──
+    matcha-drawer {
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: 10;
+        outline: 0;
+        box-sizing: border-box;
+        overflow-y: auto;
+        overflow-x: hidden;
+        transform: translate3d(-100%, 0, 0);
+        visibility: hidden;
+        transition: transform var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1),
+                    visibility var(--matcha-duration-normal, 200ms) ease;
+        background-color: var(--matcha-color-surface, #{getSurface($theme)});
+        color: var(--matcha-color-fg, #{getForeground($theme)});
+        pointer-events: auto;
+
+        // Shadow level 3 (modals, drawers)
+        box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+
+        @if $is-dark {
+            border-right: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
+        }
+
+        // Position end (right)
+        &.matcha-drawer-end {
+            right: 0;
+            transform: translate3d(100%, 0, 0);
+
+            @if $is-dark {
+                border-right: none;
+                border-left: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
+            }
+        }
+
+        // Position bottom (bottom sheet)
+        &.matcha-drawer-bottom {
+            top: auto;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            max-height: 90vh;
+            border-radius: var(--matcha-radius-xl, 16px) var(--matcha-radius-xl, 16px) 0 0;
+            transform: translate3d(0, 100%, 0);
+
+            @if $is-dark {
+                border-right: none;
+                border-top: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
+            } @else {
+                border-right: none;
+            }
+
+            // Drag handle
+            &::before {
+                content: '';
+                display: block;
+                width: 32px;
+                height: 4px;
+                margin: var(--matcha-space-100, 8px) auto;
+                border-radius: var(--matcha-radius-sm, 2px);
+                background: var(--matcha-color-hint, #{getGrey($theme)});
+                opacity: 0.3;
+            }
+        }
+
+        // Opened state
+        &.matcha-drawer-opened {
+            transform: translate3d(0, 0, 0);
+            visibility: visible;
+        }
+
+        // Mode: over — floats above content with shadow
+        &.matcha-drawer-over {
+            z-index: 15;
+        }
+
+        // Mode: side — fixed, no shadow, border only
+        &.matcha-drawer-side {
+            z-index: 10;
+            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+            box-shadow: none;
+
+            &.matcha-drawer-end {
+                border-right: none;
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+            }
+        }
+
+        // Mode: push — pushes content, border only
+        &.matcha-drawer-push {
+            border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+            box-shadow: none;
+
+            &.matcha-drawer-end {
+                border-right: none;
+                border-left: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+            }
+        }
+
+        // Inner container
+        .matcha-drawer-inner-container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+
+    // ── Drawer header ──
+    .matcha-drawer-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--matcha-space-150, 12px);
+        padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+        flex-shrink: 0;
+        color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    // ── Drawer content ──
+    .matcha-drawer-content-area {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: var(--matcha-space-300, 24px);
+        color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    // ── Drawer footer ──
+    .matcha-drawer-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--matcha-space-150, 12px);
+        padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+        flex-shrink: 0;
+    }
+
+    // ── Drawer content (main page) ──
+    matcha-drawer-content {
+        position: relative;
+        z-index: 1;
+        display: block;
+        height: 100%;
+        overflow: auto;
+        transition: margin var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    // ── Focus ring ──
+    matcha-drawer: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);
+    }
+}

package/components/matcha-drop-list.scss

@@ -0,0 +1,390 @@
+@use "sass:map";
+
+// =============================================================================
+// MATCHA DROP LIST STYLES
+// =============================================================================
+
+// Mixin para cores e temas
+@mixin matcha-drop-list-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    // =============================================================================
+    // COMPONENTE PRINCIPAL
+    // =============================================================================
+
+    .matcha-drop-list {
+        display: block;
+        position: relative;
+    }
+
+    // =============================================================================
+    // CONTAINER DAS LISTAS
+    // =============================================================================
+
+    .matcha-drop-list-container {
+        position: relative;
+        min-height: 48px;
+        display: flex;
+        flex-direction: column;
+        gap: var(--matcha-space-200, 16px);
+        padding: 0px;
+        border-radius: var(--matcha-radius-lg, 8px);
+        border-width: 0px;
+        transition: background-color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
+
+        &.matcha-drop-list-receiving {
+            background-color: getPrimaryAlpha($theme);
+            border-color: var(--matcha-color-accent, #{getAccent($theme)});
+            border-width: 2px;
+            border-style: dashed;
+            border-radius: var(--matcha-radius-lg, 8px);
+            padding: var(--matcha-space-100, 8px);
+            transition: background-color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: linear-gradient(45deg,
+                        transparent 25%,
+                        getPrimaryAlpha($theme) 25%,
+                        getPrimaryAlpha($theme) 50%,
+                        transparent 50%,
+                        transparent 75%,
+                        getPrimaryAlpha($theme) 75%,
+                        getPrimaryAlpha($theme));
+                background-size: 16px 16px;
+                animation: drop-zone-animation 2s linear infinite;
+                border-radius: var(--matcha-radius-md, 4px);
+                opacity: 0.4;
+            }
+        }
+
+        // Estados de aceitação de drop
+        &.matcha-drop-list-can-accept {
+            background-color: getGreenAlpha($theme);
+            border-color: getGreen($theme);
+            cursor: copy;
+
+            &::before {
+                background: linear-gradient(45deg,
+                        transparent 25%,
+                        getGreenAlpha($theme) 25%,
+                        getGreenAlpha($theme) 50%,
+                        transparent 50%,
+                        transparent 75%,
+                        getGreenAlpha($theme) 75%,
+                        getGreenAlpha($theme));
+                background-size: 16px 16px;
+                animation: drop-zone-animation 1.5s linear infinite;
+                opacity: 0.5;
+            }
+        }
+
+
+
+        &.matcha-drop-list-cannot-accept {
+            background-color: getRedAlpha($theme);
+            border-color: getRed($theme);
+            pointer-events: none;
+            cursor: default;
+
+            &::before {
+                background: linear-gradient(45deg,
+                        transparent 25%,
+                        getRedAlpha($theme) 25%,
+                        getRedAlpha($theme) 50%,
+                        transparent 50%,
+                        transparent 75%,
+                        getRedAlpha($theme) 75%,
+                        getRedAlpha($theme));
+                background-size: 16px 16px;
+                animation: drop-zone-animation 0.8s linear infinite;
+                opacity: 0.6;
+            }
+        }
+
+        &.matcha-drop-list-disabled {
+            color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+            pointer-events: none;
+            cursor: default;
+        }
+    }
+
+    // =============================================================================
+    // ITENS ARRASTÁVEIS — Template A
+    // =============================================================================
+
+    .matcha-drag-item {
+        position: relative;
+        display: flex;
+        padding: var(--matcha-space-150, 12px);
+        border-radius: var(--matcha-radius-md, 4px);
+        overflow: hidden;
+        transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
+        user-select: none;
+        background-color: var(--matcha-color-surface, #{getSurface($theme)});
+        color: var(--matcha-color-fg, #{getForeground($theme)});
+
+        // State layer (Template A)
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: currentColor;
+            opacity: 0;
+            border-radius: inherit;
+            pointer-events: none;
+            transition: opacity var(--matcha-duration-instant, 80ms) linear;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+        &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+
+        &:focus-visible:not([disabled]) {
+            outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            &::before { transition: none; }
+        }
+
+        &.matcha-drag-dragging {
+            z-index: 1000;
+            cursor: grabbing;
+            position: relative;
+            box-shadow: 0 8px 25px getDisabledContrastAlpha($theme);
+            background-color: var(--matcha-color-surface, #{getSurface($theme)});
+            transform: scale(1.02);
+            opacity: 0.95;
+
+            // Efeito de destaque sutil
+            &::before {
+                content: '';
+                position: absolute;
+                inset: 0;
+                border-radius: var(--matcha-radius-lg, 8px);
+                z-index: -1;
+                opacity: 0.1;
+                background: linear-gradient(45deg, getSurface($theme), getPrimary($theme));
+                animation: drag-glow 1s ease-in-out infinite alternate;
+            }
+        }
+
+        &.matcha-drag-disabled {
+            pointer-events: none;
+            cursor: default;
+            color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+        }
+
+        &.disabled-item {
+            pointer-events: none;
+            cursor: default;
+            color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+        }
+    }
+
+    // =============================================================================
+    // HANDLE DE DRAG
+    // =============================================================================
+
+    .matcha-drag-handle {
+        cursor: grab;
+        touch-action: none;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        &.disabled {
+            pointer-events: none;
+            cursor: default;
+        }
+    }
+
+    // =============================================================================
+    // CONTEÚDO DOS ITENS
+    // =============================================================================
+
+    .item-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: var(--matcha-space-050, 4px);
+
+        .item-title {
+            font-weight: 500;
+            color: var(--matcha-color-fg, #{getForeground($theme)});
+
+            &.completed {
+                text-decoration: line-through;
+                opacity: 0.7;
+            }
+        }
+
+        .item-id {
+            font-size: var(--matcha-text-body-sm, 12px);
+            font-family: monospace;
+            color: getDisabledContrastAlpha($theme);
+        }
+
+        small {
+            font-size: var(--matcha-text-caption, 11px);
+            font-style: italic;
+            color: getForegroundAlpha($theme);
+        }
+    }
+
+    // =============================================================================
+    // AÇÕES DOS ITENS
+    // =============================================================================
+
+    .item-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+
+        i {
+            font-size: var(--matcha-icon-size-sm, 16px);
+        }
+    }
+
+    // =============================================================================
+    // INDICADOR DE DROP
+    // =============================================================================
+
+    .matcha-drop-indicator {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 2px;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        transform: translateY(-8px);
+        z-index: 1000;
+        pointer-events: none;
+        margin: 0;
+        border-radius: var(--matcha-radius-sm, 2px);
+        background-color: var(--matcha-color-accent, #{getAccent($theme)});
+
+        &.active {
+            opacity: 1;
+        }
+    }
+
+    // =============================================================================
+    // PLACEHOLDER PARA LISTAS VAZIAS
+    // =============================================================================
+
+    .matcha-drop-list-placeholder {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+
+        .matcha-drop-list-empty-placeholder {
+            font-style: italic;
+            padding: var(--matcha-space-250, 20px);
+            text-align: center;
+            font-size: var(--matcha-text-body-md, 14px);
+            border-radius: var(--matcha-radius-md, 4px);
+            transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
+            color: getDisabledContrastAlpha($theme);
+            border-color: getForegroundAlpha($theme);
+
+            &.can-accept {
+                color: getGreen($theme);
+                border-color: getGreen($theme);
+                background-color: getGreenAlpha($theme);
+            }
+
+            &.cannot-accept {
+                color: getRed($theme);
+                border-color: getRed($theme);
+                background-color: getRedAlpha($theme);
+                animation: shake 0.5s ease-in-out;
+            }
+        }
+    }
+
+    // =============================================================================
+    // HIGH CONTRAST MODE SUPPORT
+    // =============================================================================
+
+    @media (prefers-contrast: high) {
+        .matcha-drop-list-container.matcha-drop-list-receiving {
+            border-color: var(--matcha-color-fg, #{getForeground($theme)});
+            background-color: getForegroundAlpha($theme);
+        }
+
+        .matcha-drag-item.matcha-drag-dragging {
+            border: 2px solid var(--matcha-color-fg, #{getForeground($theme)});
+        }
+    }
+}
+
+// =============================================================================
+// ANIMAÇÕES
+// =============================================================================
+
+@keyframes drop-zone-animation {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 32px 0, 32px 0, 32px 0;
+    }
+}
+
+@keyframes pulse-reject {
+    0% {
+        opacity: 0.5;
+        transform: scaleY(1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleY(1.5);
+    }
+}
+
+@keyframes shake {
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-2px);
+    }
+
+    75% {
+        transform: translateX(2px);
+    }
+}
+
+@keyframes drag-glow {
+    0% {
+        opacity: 0.1;
+    }
+
+    100% {
+        opacity: 0.3;
+    }
+}

package/components/matcha-emoji.scss

@@ -0,0 +1,69 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-emoji.scss — Pastoral sentiment emojis
+// Aligned with Figma matcha/emoji:
+//   9 sentimentos × 3 estilos = 27 variantes
+//   Sentimentos: Feliz, Grato, Abençoado, Doente, Sozinho, Triste, Pouca fé, Cuidado, Angustiado
+//   Estilos: Default (emoji nativo), Outline, Filled
+//   Tamanhos: sm (16px), md (24px), lg (32px)
+// Angular: matcha-emoji
+// =============================================================================
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-emoji {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+// ── Sizes ───────────────────────────────────────────────────────────────────
+
+.matcha-emoji--sm {
+  width: var(--matcha-icon-size-sm, 16px);
+  height: var(--matcha-icon-size-sm, 16px);
+  font-size: var(--matcha-icon-size-sm, 16px);
+}
+
+.matcha-emoji--md {
+  width: var(--matcha-icon-size-md, 24px);
+  height: var(--matcha-icon-size-md, 24px);
+  font-size: var(--matcha-icon-size-md, 24px);
+}
+
+.matcha-emoji--lg {
+  width: var(--matcha-icon-size-lg, 32px);
+  height: var(--matcha-icon-size-lg, 32px);
+  font-size: var(--matcha-icon-size-lg, 32px);
+}
+
+// ── Styles ──────────────────────────────────────────────────────────────────
+
+.matcha-emoji--default {
+  // Native emoji — no additional styling needed
+}
+
+.matcha-emoji--outline,
+.matcha-emoji--filled {
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// ── Theme ───────────────────────────────────────────────────────────────────
+
+@mixin matcha-emoji-theme($theme) {
+  .matcha-emoji--outline svg {
+    fill: none;
+    stroke: var(--matcha-color-fg, #{getForeground($theme)});
+    stroke-width: 1.5;
+  }
+
+  .matcha-emoji--filled svg {
+    fill: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+}