@inchurch/matcha-theme 20.0.3

package/components/matcha-accordion.scss

@@ -0,0 +1,157 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-accordion.scss — Collapsible card sections
+// Aligned with Figma matcha/accordion/item:
+//   Estado(3: Fechado, Aberto, Disabled)
+//   Card surface + chevron rotate + divider + content slot
+// =============================================================================
+
+@mixin matcha-accordion-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  matcha-accordion-item {
+    .accordion-item {
+      background: var(--matcha-color-surface, #{getSurface($theme)});
+      border-radius: var(--matcha-radius-lg, 8px);
+    }
+
+    // ── Header ──
+    .accordion-header-wrapper {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+
+      &:hover:not([disabled]) {
+        .accordion-header-state {
+          opacity: var(--matcha-state-hover, 0.08);
+        }
+      }
+
+      &:active:not([disabled]) {
+        .accordion-header-state {
+          opacity: var(--matcha-state-active, 0.12);
+        }
+      }
+
+      &: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-lg, 8px);
+      }
+    }
+
+    // ── Content text ──
+    .accordion-content {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+    }
+
+    // ── Chevron ──
+    .accordion-chevron {
+      color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
+    }
+
+    // ── Disabled ──
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-200, 16px);
+  width: 100%;
+
+  // Legacy stretch support
+  &[stretch]:not([stretch="false"]) {
+    .accordion-header-wrapper {
+      width: 100%;
+
+      matcha-accordion-header {
+        width: 100%;
+      }
+    }
+  }
+}
+
+matcha-accordion-item {
+  display: block;
+
+  .accordion-item {
+    display: flex;
+    flex-direction: column;
+    padding: var(--matcha-space-300, 24px);
+    gap: var(--matcha-space-300, 24px);
+    overflow: hidden;
+  }
+
+  // ── Header ──
+  .accordion-header-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--matcha-space-200, 16px);
+    cursor: pointer;
+    position: relative;
+    border: none;
+    background: none;
+    width: 100%;
+    padding: 0;
+    text-align: left;
+
+    // Figma matcha/accordion/item header: 20/800/28 (title-xl ExtraBold)
+    matcha-accordion-header {
+      flex: 1;
+      min-width: 0;
+      font-size: var(--matcha-text-title-xl, 20px);
+      font-weight: var(--matcha-weight-extrabold, 800);
+      line-height: var(--matcha-leading-title-xl, 28px);
+    }
+  }
+
+  // ── State layer on header ──
+  .accordion-header-state {
+    position: absolute;
+    inset: calc(var(--matcha-space-300, 24px) * -1);
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    border-radius: var(--matcha-radius-lg, 8px);
+    transition: opacity var(--matcha-duration-instant, 80ms) linear;
+  }
+
+  // ── Chevron ──
+  .accordion-chevron {
+    flex-shrink: 0;
+    width: var(--matcha-icon-size-md, 24px);
+    height: var(--matcha-icon-size-md, 24px);
+    transition: transform var(--matcha-duration-moderate, 300ms) ease;
+  }
+
+  &.is-open .accordion-chevron {
+    transform: rotate(180deg);
+  }
+
+  // ── Content ──
+  .accordion-content {
+    overflow: hidden;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-lg, 16px);
+    line-height: var(--matcha-leading-body-lg, 24px);
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  matcha-accordion-item {
+    .accordion-chevron {
+      transition: none;
+    }
+    .accordion-header-state {
+      transition: none;
+    }
+  }
+}

package/components/matcha-audio-player.scss

@@ -0,0 +1,32 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-audio-player.scss — Audio player component
+// Aligned with Figma matcha/audio-player
+// Angular: matcha-audio-player
+// =============================================================================
+
+@mixin matcha-audio-player-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-audio-player {
+    .is-selected {
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent, #{getAccent($theme)});
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-audio-player {
+  .audio-player {
+    audio {
+      // display: none
+    }
+
+    .audio & {
+      a { display: none; }
+      audio { display: inline-block; }
+    }
+  }
+}

package/components/matcha-autocomplete.scss

@@ -0,0 +1,134 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-autocomplete.scss — Autocomplete (search field + dropdown options)
+// Aligned with Figma matcha/autocomplete:
+//   Estado(2: Fechado, Aberto) — Uses matcha-field/text + matcha-panel
+// Angular: matcha-autocomplete + [matchaAutocomplete] directive
+// Deps: matcha-panel, matcha-option, matcha-form-field
+// =============================================================================
+
+@mixin matcha-autocomplete-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  matcha-autocomplete {
+    .matcha-autocomplete-container {
+      padding: 0 var(--matcha-space-150, 12px);
+      margin-top: calc(var(--matcha-space-150, 12px) * -1);
+    }
+  }
+
+  // ── Panel override for autocomplete context ──
+  .matcha-autocomplete-panel {
+    background: var(--matcha-color-surface, #{getSurface($theme)});
+    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+    border-radius: var(--matcha-radius-lg, 8px);
+    box-shadow: var(--matcha-shadow-2, #{if($is-dark, $shadow-2-dark, $shadow-2-light)});
+    overflow: hidden;
+  }
+
+  // ── Option within autocomplete ──
+  .matcha-autocomplete-option {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+    cursor: pointer;
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    line-height: var(--matcha-leading-body-md, 20px);
+    position: relative;
+    overflow: hidden;
+
+    // State layer
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: currentColor;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+
+    &:hover:not([aria-disabled="true"]):not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+    &:active:not([aria-disabled="true"]):not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+
+    &: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);
+    }
+
+    // Selected state
+    &[aria-selected="true"],
+    &.matcha-option-selected {
+      background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      font-weight: var(--matcha-weight-medium, 500);
+    }
+
+    // Disabled state
+    &[aria-disabled="true"],
+    &.matcha-option-disabled {
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  // ── Empty state (sem resultado pro filtro atual) ──
+  .matcha-autocomplete-empty {
+    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+    text-align: center;
+    color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    line-height: var(--matcha-leading-body-md, 20px);
+    font-style: italic;
+  }
+
+  // ── Clear button ──
+  .matcha-autocomplete-clear-button {
+    color: var(--matcha-color-text-hint, #{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);
+      border-radius: var(--matcha-radius-sm, 2px);
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-autocomplete {
+  display: block;
+  width: 100%;
+}
+
+.matcha-autocomplete-container {
+  position: relative;
+}
+
+// ── Disabled state ──
+.matcha-autocomplete-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-autocomplete-panel {
+    transition: none;
+  }
+
+  .matcha-autocomplete-option::before {
+    transition: none;
+  }
+}

package/components/matcha-avatar.scss

@@ -0,0 +1,161 @@
+// =============================================================================
+// matcha-avatar.scss — Avatar component (photo, initials, placeholder + status)
+// Aligned with Figma Avatar/Matcha: XS(24) SM(32) MD(40) LG(56) XL(80) 2XL(96)
+// =============================================================================
+
+// ── Structural (outside mixin) ──────────────────────────────────────────────
+
+.matcha-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--matcha-radius-pill, 9999px);
+
+  font-weight: var(--matcha-weight-medium, 500);
+  user-select: none;
+  flex-shrink: 0;
+
+  // ── Sizes (aligned with Figma) ──
+  &.matcha-avatar-xs,
+  &.matcha-avatar-tiny {
+    width: var(--matcha-avatar-xs, 24px);
+    height: var(--matcha-avatar-xs, 24px);
+    font-size: var(--matcha-text-2xs, 10px);
+    line-height: 1;
+  }
+
+  &.matcha-avatar-sm,
+  &.matcha-avatar-small {
+    width: var(--matcha-avatar-sm, 32px);
+    height: var(--matcha-avatar-sm, 32px);
+    font-size: var(--matcha-text-sm, 12px);
+    line-height: 1;
+  }
+
+  &.matcha-avatar-md,
+  &.matcha-avatar-medium {
+    width: var(--matcha-avatar-md, 40px);
+    height: var(--matcha-avatar-md, 40px);
+    font-size: var(--matcha-text-md, 14px);
+    line-height: 1;
+  }
+
+  &.matcha-avatar-lg,
+  &.matcha-avatar-large {
+    width: var(--matcha-avatar-lg, 56px);
+    height: var(--matcha-avatar-lg, 56px);
+    font-size: var(--matcha-text-2xl, 20px);
+    line-height: 1;
+  }
+
+  &.matcha-avatar-xl {
+    width: var(--matcha-avatar-xl, 80px);
+    height: var(--matcha-avatar-xl, 80px);
+    font-size: var(--matcha-text-3xl, 24px);
+    line-height: 1;
+  }
+
+  &.matcha-avatar-2xl,
+  &.matcha-avatar-huge {
+    width: var(--matcha-avatar-2xl, 96px);
+    height: var(--matcha-avatar-2xl, 96px);
+    font-size: var(--matcha-text-4xl, 32px);
+    line-height: 1;
+  }
+
+  // ── Image ──
+  .matcha-avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+  }
+
+  // ── Initials ──
+  .matcha-avatar-initials {
+    font-weight: var(--matcha-weight-medium, 500);
+    text-transform: uppercase;
+    letter-spacing: var(--matcha-letter-spacing-wide, 0.5px);
+  }
+
+  // ── Placeholder icon ──
+  .matcha-avatar-icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  // ── Disabled ──
+  &.matcha-avatar--disabled,
+  &.color-disabled {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+    pointer-events: none;
+  }
+}
+
+// ── Status indicator ────────────────────────────────────────────────────────
+
+.matcha-avatar-status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  border: var(--matcha-border-thin, 2px) solid var(--matcha-color-surface, white);
+  box-sizing: border-box;
+
+  // Size scales with avatar
+  .matcha-avatar-xs &,
+  .matcha-avatar-tiny & { width: var(--matcha-avatar-status-xs, 8px); height: var(--matcha-avatar-status-xs, 8px); }
+
+  .matcha-avatar-sm &,
+  .matcha-avatar-small & { width: var(--matcha-avatar-status-sm, 10px); height: var(--matcha-avatar-status-sm, 10px); }
+
+  .matcha-avatar-md &,
+  .matcha-avatar-medium & { width: var(--matcha-avatar-status-md, 12px); height: var(--matcha-avatar-status-md, 12px); }
+
+  .matcha-avatar-lg &,
+  .matcha-avatar-large & { width: var(--matcha-avatar-status-lg, 14px); height: var(--matcha-avatar-status-lg, 14px); }
+
+  .matcha-avatar-xl & { width: var(--matcha-avatar-status-xl, 16px); height: var(--matcha-avatar-status-xl, 16px); }
+
+  .matcha-avatar-2xl &,
+  .matcha-avatar-huge & { width: var(--matcha-avatar-status-2xl, 18px); height: var(--matcha-avatar-status-2xl, 18px); }
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-avatar-theme($theme) {
+  .matcha-avatar {
+    .matcha-avatar-icon {
+      color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+    }
+
+    &.matcha-avatar--disabled,
+    &.color-disabled {
+      background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+      color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+
+      .matcha-avatar-icon {
+        color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+      }
+    }
+  }
+
+  // ── Status colors ──
+  .matcha-avatar-status {
+    border-color: var(--matcha-color-surface, #{getSurface($theme)});
+
+    &.matcha-avatar-status--online {
+      background-color: var(--matcha-color-success, #{getSuccess($theme)});
+    }
+
+    &.matcha-avatar-status--offline {
+      background-color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+    }
+
+    &.matcha-avatar-status--busy {
+      background-color: var(--matcha-color-danger, #{getDanger($theme)});
+    }
+  }
+}

package/components/matcha-badge.scss

@@ -0,0 +1,120 @@
+// =============================================================================
+// matcha-badge.scss — Badge component (Dot, Count, Label)
+// Aligned with Figma matcha/badge: Tipo(3) × Cor(5) = 13 variants
+// =============================================================================
+
+// ── Structural ──────────────────────────────────────────────────────────────
+
+.matcha-badge-container {
+  position: relative;
+  display: inline-flex;
+}
+
+.matcha-badge {
+  position: absolute;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--matcha-weight-bold, 700);
+  white-space: nowrap;
+  pointer-events: none;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  animation: matcha-badge-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  // Default position: top-right (offset negativo = -space-050 / -4px)
+  top: calc(-1 * var(--matcha-space-050, 4px));
+  right: calc(-1 * var(--matcha-space-050, 4px));
+
+  &.matcha-badge--top-left { top: calc(-1 * var(--matcha-space-050, 4px)); right: auto; left: calc(-1 * var(--matcha-space-050, 4px)); }
+  &.matcha-badge--bottom-right { top: auto; bottom: calc(-1 * var(--matcha-space-050, 4px)); right: calc(-1 * var(--matcha-space-050, 4px)); }
+  &.matcha-badge--bottom-left { top: auto; bottom: calc(-1 * var(--matcha-space-050, 4px)); right: auto; left: calc(-1 * var(--matcha-space-050, 4px)); }
+}
+
+// ── Dot ──
+.matcha-badge--dot {
+  width: var(--matcha-badge-dot-size, 10px);
+  height: var(--matcha-badge-dot-size, 10px);
+  border-width: var(--matcha-border-thin, 2px);
+  border-style: solid;
+}
+
+// ── Count — Figma Tipo=Count: 20×20 pad 1/4, text 11/400/14 (caption)
+.matcha-badge--count {
+  min-width: var(--matcha-space-250, 20px);
+  height: var(--matcha-space-250, 20px);
+  padding: 1px var(--matcha-space-050, 4px);
+  font-size: var(--matcha-text-caption, 11px);
+  line-height: var(--matcha-leading-caption, 14px);
+  font-weight: var(--matcha-weight-regular, 400);
+  letter-spacing: 0;
+  border-width: var(--matcha-border-thin, 2px);
+  border-style: solid;
+}
+
+// ── Label — Figma Tipo=Label: pad 2/8, text 11/400/14 (caption)
+.matcha-badge--label {
+  position: static;
+  padding: var(--matcha-space-025, 2px) var(--matcha-space-100, 8px);
+  font-size: var(--matcha-text-caption, 11px);
+  line-height: var(--matcha-leading-caption, 14px);
+  font-weight: var(--matcha-weight-regular, 400);
+  gap: var(--matcha-space-050, 4px);
+}
+
+// ── Inline ──
+.matcha-badge--inline {
+  position: static;
+}
+
+// ── Hidden ──
+.matcha-badge--hidden {
+  display: none;
+}
+
+// ── Animation ──
+@keyframes matcha-badge-in {
+  0%   { transform: scale(0); }
+  60%  { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-badge { animation: none; }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-badge-theme($theme) {
+  .matcha-badge--accent {
+    background-color: var(--matcha-color-badge-bg, #{getAccent($theme)});
+    color: var(--matcha-color-badge-fg, #{getAccentContrast($theme)});
+  }
+
+  .matcha-badge--danger {
+    background-color: var(--matcha-color-badge-danger-bg, #{getDanger($theme)});
+    color: var(--matcha-color-badge-danger-fg, #{getDangerContrast($theme)});
+  }
+
+  .matcha-badge--warn {
+    background-color: var(--matcha-color-badge-warn-bg, #{getWarn($theme)});
+    color: var(--matcha-color-badge-warn-fg, #{getWarnContrast($theme)});
+  }
+
+  .matcha-badge--success {
+    background-color: var(--matcha-color-badge-success-bg, #{getSuccess($theme)});
+    color: var(--matcha-color-badge-success-fg, #{getSuccessContrast($theme)});
+  }
+
+  .matcha-badge--info {
+    background-color: var(--matcha-color-badge-info-bg, #{getInfo($theme)});
+    color: var(--matcha-color-badge-info-fg, #{getInfoContrast($theme)});
+  }
+
+  .matcha-badge--dot,
+  .matcha-badge--count {
+    border-color: var(--matcha-color-badge-border, #{getSurface($theme)});
+  }
+}