@inchurch/matcha-theme 20.0.3

package/components/matcha-header.scss

@@ -0,0 +1,325 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-header.scss — App topbar + Profile card
+// Aligned with Figma matcha/header (3 estilos) + matcha/header/profile (2 estilos)
+// =============================================================================
+
+@mixin matcha-header-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  // ── App Topbar ──
+  .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;
+        }
+      }
+    }
+  }
+
+  // ── Profile Card ──
+  .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 — App Topbar ─────────────────────────────────────────────────────
+
+.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-caption, 11px);
+    line-height: var(--matcha-leading-caption, 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-button-sm, 13px);
+    font-weight: var(--matcha-weight-medium, 500);
+    line-height: var(--matcha-leading-button-sm, 19px);
+    letter-spacing: var(--matcha-letter-spacing-button, 0.2px);
+    white-space: nowrap;
+  }
+}
+
+// ── Layout — Profile Card ───────────────────────────────────────────────────
+
+.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 — Header ──
+@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;
+    }
+  }
+}
+
+// ── Responsive — Profile ──
+@include media-breakpoint('xs') {
+  .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);
+    }
+  }
+}
+
+// ── Reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+  .matcha-header-profile .profile-edit,
+  .matcha-header-profile .profile-back {
+    transition: none;
+  }
+}

package/components/matcha-highlight.scss

@@ -0,0 +1,296 @@
+@mixin matcha-highlight-theme($theme) {
+    // ========================================
+    // TEMA PADRÃO (MATCHA)
+    // ========================================
+
+    matcha-highlight {
+        padding: 16px;
+        border-radius: 8px;
+        display: flex;
+        overflow:auto;
+        position: relative;
+        min-height:56px;
+
+        // Variáveis CSS para tema padrão (Matcha)
+        --prism-bg: transparent;
+        --prism-text: #{getBlue($theme)};
+        --prism-comment: #{getBlue($theme)};
+        --prism-keyword: #{getBlue($theme)};
+        --prism-string: #{getBlue($theme)};
+        --prism-number: #{getBlue($theme)};
+        --prism-function: #{getBlue($theme)};
+        --prism-variable: #{getBlue($theme)};
+        --prism-type: #{getBlue($theme)};
+        --prism-operator: #{getBlue($theme)};
+        --prism-punctuation: #{getBlue($theme)};
+        --prism-property: #{getBlue($theme)};
+        --prism-tag: #{getBlue($theme)};
+        --prism-attribute: #{getBlue($theme)};
+        --prism-class: #{getBlue($theme)};
+        --prism-constant: #{getBlue($theme)};
+        --prism-regex: #{getBlue($theme)};
+        --prism-important: #{getBlue($theme)};
+
+        --code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+        --code-font-size: 14px;
+        --code-line-height: 1.6;
+
+        // =========================================================================
+        // TEMAS ALTERNATIVOS
+        // =========================================================================
+        // -------------------------------------------------------------------------
+        // Tema claro
+        // -------------------------------------------------------------------------
+        &[theme="vs-code-light"] {
+            --prism-bg: #ffffff;
+            --prism-text: #000000;
+            --prism-comment: #6a9955;
+            --prism-keyword: #0000ff;
+            --prism-string: #a31515;
+            --prism-number: #098658;
+            --prism-function: #795e26;
+            --prism-variable: #001080;
+            --prism-type: #267f99;
+            --prism-operator: #000000;
+            --prism-punctuation: #000000;
+            --prism-property: #0451a5;
+            --prism-tag: #800000;
+            --prism-attribute: #ff0000;
+            --prism-class: #267f99;
+            --prism-constant: #0070c1;
+            --prism-regex: #811f3f;
+            --prism-important: #e50000;
+        }
+
+        // -------------------------------------------------------------------------
+        // Tema escuro
+        // -------------------------------------------------------------------------
+        &[theme="vs-code-dark"] {
+            --prism-bg: #1e1e1e;
+            --prism-text: #d4d4d4;
+            --prism-comment: #6a9955;
+            --prism-keyword: #569cd6;
+            --prism-string: #ce9178;
+            --prism-number: #b5cea8;
+            --prism-function: #dcdcaa;
+            --prism-variable: #9cdcfe;
+            --prism-type: #4ec9b0;
+            --prism-operator: #d4d4d4;
+            --prism-punctuation: #d4d4d4;
+            --prism-property: #92c5f8;
+            --prism-tag: #f44747;
+            --prism-attribute: #92c5f8;
+            --prism-class: #4ec9b0;
+            --prism-constant: #4fc1ff;
+            --prism-regex: #d16969;
+            --prism-important: #ff6b6b;
+        }
+
+        // -------------------------------------------------------------------------
+        // Tema Dracula
+        // -------------------------------------------------------------------------
+        &[theme="dracula"] {
+            --prism-bg: #282a36;
+            --prism-text: #f8f8f2;
+            --prism-comment: #6272a4;
+            --prism-keyword: #ff79c6;
+            --prism-string: #f1fa8c;
+            --prism-number: #bd93f9;
+            --prism-function: #50fa7b;
+            --prism-variable: #8be9fd;
+            --prism-type: #8be9fd;
+            --prism-operator: #ff79c6;
+            --prism-punctuation: #f8f8f2;
+            --prism-property: #66d9ef;
+            --prism-tag: #ff79c6;
+            --prism-attribute: #50fa7b;
+            --prism-class: #bd93f9;
+            --prism-constant: #bd93f9;
+            --prism-regex: #ffb86c;
+            --prism-important: #ff5555;
+        }
+
+        // -------------------------------------------------------------------------
+        // Tema matcha
+        // -------------------------------------------------------------------------
+        &[theme="matcha"] {
+            --prism-bg: #1a2420;
+            --prism-text: #e6f4ea;
+            --prism-comment: #5c7f6e;
+            --prism-keyword: #7fffd4;
+            --prism-string: #b7f774;
+            --prism-number: #6ee7b7;
+            --prism-function: #4ade80;
+            --prism-variable: #a7ffeb;
+            --prism-type: #34d399;
+            --prism-operator: #7fffd4;
+            --prism-punctuation: #e6f4ea;
+            --prism-property: #5eead4;
+            --prism-tag: #2dd4bf;
+            --prism-attribute: #bbf7d0;
+            --prism-class: #6ee7b7;
+            --prism-constant: #99f6e4;
+            --prism-regex: #bef264;
+            --prism-important: #22d3ee;
+        }
+
+        // -------------------------------------------------------------------------
+        // Tema none (sem tema específico - usa cores padrão do sistema)
+        // -------------------------------------------------------------------------
+        &[theme="none"] {
+            --prism-bg: transparent;
+            --prism-text: inherit;
+            --prism-comment: inherit;
+            --prism-keyword: inherit;
+            --prism-string: inherit;
+            --prism-number: inherit;
+            --prism-function: inherit;
+            --prism-variable: inherit;
+            --prism-type: inherit;
+            --prism-operator: inherit;
+            --prism-punctuation: inherit;
+            --prism-property: inherit;
+            --prism-tag: inherit;
+            --prism-attribute: inherit;
+            --prism-class: inherit;
+            --prism-constant: inherit;
+            --prism-regex: inherit;
+            --prism-important: inherit;
+        }
+
+        // ========================================
+        // ESTILOS BASE DO COMPONENTE
+        // ========================================
+
+        pre,code { margin: 0; padding: 0;}
+        background: var(--prism-bg);
+
+        // Estilos base
+        code[class*="language-"],
+        pre[class*="language-"] {
+            color: var(--prism-text);
+            background: var(--prism-bg);
+            text-shadow: none;
+            font-family: var(--code-font-family);
+            font-size: var(--code-font-size);
+            text-align: left;
+            white-space: pre;
+            word-spacing: normal;
+            word-break: normal;
+            word-wrap: normal;
+            line-height: var(--code-line-height);
+            tab-size: 4;
+            hyphens: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        pre[class*="language-"] {
+            padding: 0;
+            margin: 0;
+            overflow: auto;
+            border-radius: 8px;
+        }
+
+        code[class*="language-"] {
+            padding: 0;
+            background: transparent;
+        }
+
+        // Cores específicas para syntax highlighting
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: var(--prism-comment);
+            font-style: italic;
+        }
+
+        .token.punctuation {
+            color: var(--prism-punctuation);
+        }
+
+        .token.property,
+        .token.tag,
+        .token.constant,
+        .token.symbol,
+        .token.deleted {
+            color: var(--prism-tag);
+        }
+
+        .token.boolean,
+        .token.number {
+            color: var(--prism-number);
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.builtin,
+        .token.inserted {
+            color: var(--prism-string);
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string,
+        .token.variable {
+            color: var(--prism-operator);
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.function,
+        .token.class-name {
+            color: var(--prism-function);
+        }
+
+        .token.keyword {
+            color: var(--prism-keyword);
+        }
+
+        .token.regex,
+        .token.important {
+            color: var(--prism-regex);
+        }
+
+        .token.important,
+        .token.bold {
+            font-weight: bold;
+        }
+
+        .token.italic {
+            font-style: italic;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
+
+        // ========================================
+        // CONTAINER E COPY BUTTON
+        // ========================================
+
+        .matcha-highlight-container {
+            position: relative;
+            border-radius: 8px;
+        }
+
+        .copy-button {
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        &:hover .copy-button {
+            opacity: 1;
+        }
+
+        .highlight-content {
+            position: relative;
+        }
+    }
+
+}

package/components/matcha-hint-text.scss

@@ -0,0 +1,66 @@
+// =============================================================================
+// matcha-hint-text.scss — Hint/error/warning/info/success text
+// Aligned with Figma matcha/hint-text: Tipo(4) × Tamanho(SM/MD) = 8 variants
+// =============================================================================
+
+@mixin generate-matcha-hint-size-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="sm"],
+            &[size#{$infix}="tiny"] {
+                font-size: px-to-rem(12px);
+                line-height: px-to-rem(16px);
+
+                matcha-icon span {
+                    width: px-to-rem(16px);
+                    height: px-to-rem(16px);
+                    font-size: px-to-rem(16px);
+                    line-height: px-to-rem(16px);
+                }
+            }
+
+            &[size#{$infix}="md"],
+            &[size#{$infix}="medium"] {
+                font-size: px-to-rem(14px);
+                line-height: px-to-rem(24px);
+
+                matcha-icon,
+                matcha-icon span {
+                    width: px-to-rem(24px);
+                    height: px-to-rem(24px);
+                    font-size: px-to-rem(24px);
+                    line-height: px-to-rem(24px);
+                }
+            }
+        }
+    }
+}
+
+@mixin matcha-hint-text($theme) {
+    matcha-hint-text {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-050, 4px);
+
+        @include generate-matcha-hint-size-classes($helper-breakpoints);
+
+        &[type="error"] {
+            color: var(--matcha-color-danger, #{getDanger($theme)});
+        }
+
+        &[type="warning"] {
+            color: var(--matcha-color-warn, #{getWarn($theme)});
+        }
+
+        &[type="info"] {
+            color: var(--matcha-color-info, #{getInfo($theme)});
+        }
+
+        &[type="success"] {
+            color: var(--matcha-color-success, #{getSuccess($theme)});
+        }
+    }
+}