@inchurch/matcha-theme 20.0.3

package/components/matcha-toolbar.scss

@@ -0,0 +1,206 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-toolbar.scss — Page toolbar + Settings toolbar item
+// Aligned with Figma matcha/toolbar (3 tipos) + matcha/toolbar/item (3 tipos)
+// Angular: matcha-toolbar, matcha-toolbar-button, matcha-toolbar-main-button,
+//          matcha-toolbar-content, matcha-toolbar-custom-button
+// =============================================================================
+
+@mixin matcha-toolbar-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  // ── Page Toolbar Container ──
+  matcha-toolbar {
+    .matcha-toolbar-container {
+      background: var(--matcha-color-surface, #{getSurface($theme)});
+      border-radius: var(--matcha-radius-lg, 8px);
+    }
+  }
+
+  // ── Toolbar Button (icon, outline, grey) ──
+  matcha-toolbar-button {
+    button {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+
+      &:hover:not(:disabled) {
+        background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($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);
+      }
+    }
+  }
+
+  // ── Main Button (accent) ──
+  matcha-toolbar-main-button {
+    button {
+      background: var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
+
+      &:hover:not(:disabled) {
+        opacity: 0.9;
+      }
+
+      &: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);
+      }
+    }
+  }
+
+  // ── Settings Toolbar Item ──
+  .matcha-toolbar-item {
+    .toolbar-item-title {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    .toolbar-item-description {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+    }
+
+    .toolbar-item-hint {
+      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-toolbar {
+  display: block;
+  width: 100%;
+
+  .matcha-toolbar-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    // Figma matcha/toolbar: h 64, pad 16, gap 8, radius 8
+    padding: var(--matcha-space-200, 16px);
+    gap: var(--matcha-space-100, 8px);
+    min-height: 64px;
+    border-radius: var(--matcha-radius-lg, 8px);
+  }
+
+  .matcha-toolbar-title {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .matcha-toolbar-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    flex-wrap: wrap;
+  }
+}
+
+// ── Toolbar Button ──
+matcha-toolbar-button {
+  display: inline-flex;
+}
+
+// ── Main Button ──
+matcha-toolbar-main-button {
+  display: inline-flex;
+
+  button {
+    border: none;
+    border-radius: var(--matcha-radius-lg, 8px);
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-label-md, 14px);
+    font-weight: var(--matcha-weight-medium, 500);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    min-height: 40px;
+  }
+}
+
+// ── Toolbar Content ──
+matcha-toolbar-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--matcha-space-100, 8px);
+}
+
+// ── Settings Toolbar Item ──
+.matcha-toolbar-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-200, 16px);
+  width: 100%;
+
+  .toolbar-item-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--matcha-space-200, 16px);
+  }
+
+  .toolbar-item-dropdowns {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    flex-wrap: wrap;
+  }
+
+  .toolbar-item-description {
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    line-height: var(--matcha-leading-body-md, 20px);
+  }
+
+  .toolbar-item-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--matcha-space-100, 8px);
+  }
+
+  .toolbar-item-hint {
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    line-height: var(--matcha-leading-body-md, 20px);
+  }
+}
+
+// ── Responsive ──
+@include media-breakpoint('lt-md') {
+  matcha-toolbar {
+    .matcha-toolbar-container {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .matcha-toolbar-title {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    .matcha-toolbar-actions {
+      width: 100%;
+    }
+  }
+
+  .matcha-toolbar-item {
+    .toolbar-item-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}
+
+// ── Reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+  matcha-toolbar-main-button button {
+    transition: none;
+  }
+}

package/components/matcha-tooltip.scss

@@ -0,0 +1,128 @@
+// =============================================================================
+// matcha-tooltip.scss — Tooltip with arrow (4 positions + close button)
+// Aligned with Figma matcha/tooltip: Posição(4) × Close(2) = 5 variants
+// =============================================================================
+
+.matcha-tooltip-content {
+    // Figma matcha/tooltip: pad 8/16, radius 8, text 14/500/20 (Medium)
+    position: absolute;
+    z-index: var(--matcha-z-tooltip, 400);
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+    border-radius: var(--matcha-radius-lg, 8px);
+    font-size: var(--matcha-text-md, 14px);
+    font-weight: var(--matcha-weight-medium, 500);
+    line-height: var(--matcha-leading-body-md, 20px);
+    width: auto;
+    max-width: 500px;
+    text-overflow: ellipsis;
+    display: inline-flex;
+    gap: var(--matcha-space-100, 8px);
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    // Arrow — default: above (arrow points down)
+    &:not(.matcha-tooltip-content_below):not(.matcha-tooltip-content_left):not(.matcha-tooltip-content_right)::after {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 6px 8px 0 8px;
+        bottom: -4px;
+        left: 50%;
+        border-radius: var(--matcha-radius-none, 0);
+        transform: translateX(-50%);
+    }
+}
+
+// Close button
+.matcha-tooltip-close {
+    display: flex;
+    pointer-events: auto;
+    cursor: pointer;
+
+    &::before {
+        content: "\e92a";
+        font-family: 'MatchaIcons';
+        font-size: var(--matcha-icon-size-sm, 16px);
+        line-height: 16px;
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+// Arrow — below (arrow points up)
+.matcha-tooltip-content_below::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0px 8px 6px 8px;
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+// Arrow — left (arrow points right)
+.matcha-tooltip-content_left::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 8px 0 8px 6px;
+    top: 50%;
+    right: -4px;
+    transform: translateY(-50%);
+}
+
+// Arrow — right (arrow points left)
+.matcha-tooltip-content_right::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 8px 6px 8px 0;
+    top: 50%;
+    left: -4px;
+    transform: translateY(-50%);
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-tooltip-theme($theme) {
+    .matcha-tooltip-content {
+        background-color: var(--matcha-color-bg-inverse, #{getForeground($theme)});
+        color: var(--matcha-color-text-inverse, #{getForegroundInverse($theme)});
+
+        // Arrow colors per position
+        &:not(.matcha-tooltip-content_below):not(.matcha-tooltip-content_left):not(.matcha-tooltip-content_right)::after {
+            border-color: var(--matcha-color-bg-inverse, #{getForeground($theme)}) transparent transparent transparent;
+        }
+    }
+
+    .matcha-tooltip-content_below::before {
+        border-color: transparent transparent var(--matcha-color-bg-inverse, #{getForeground($theme)}) transparent;
+    }
+
+    .matcha-tooltip-content_left::after {
+        border-color: transparent transparent transparent var(--matcha-color-bg-inverse, #{getForeground($theme)});
+    }
+
+    .matcha-tooltip-content_right::after {
+        border-color: transparent var(--matcha-color-bg-inverse, #{getForeground($theme)}) transparent transparent;
+    }
+
+    .matcha-tooltip-close {
+        color: var(--matcha-color-text-inverse, #{getForegroundInverse($theme)});
+        opacity: 0.7;
+
+        &:hover { opacity: 1; }
+    }
+}

package/components/matcha-uploader.scss

@@ -0,0 +1,215 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-uploader.scss — File upload component
+// Aligned with Figma matcha/uploader:
+//   Estado(3: Dropzone, Enviando, Completo)
+// Angular: matcha-uploader
+// =============================================================================
+
+@mixin matcha-uploader-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  // ── Dropzone ──
+  .matcha-uploader-dropzone {
+    background: var(--matcha-color-surface-bg, #{getBackground($theme)});
+    border-color: var(--matcha-color-border, #{getGrey($theme)});
+
+    &.matcha-uploader-dragover {
+      background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      border-color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    &.matcha-uploader-error {
+      border-color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
+    }
+  }
+
+  .matcha-uploader-dropzone__icon {
+    background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+    color: var(--matcha-color-accent, #{getAccent($theme)});
+  }
+
+  .matcha-uploader-dropzone__title {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+
+  .matcha-uploader-dropzone__hint {
+    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
+  }
+
+  // ── File item ──
+  .matcha-uploader-file {
+    background: var(--matcha-color-surface, #{getSurface($theme)});
+    border-color: var(--matcha-color-border, #{getGrey($theme)});
+  }
+
+  .matcha-uploader-file__name {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+
+  .matcha-uploader-file__size {
+    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
+  }
+
+  .matcha-uploader-file__progress-fill {
+    background: var(--matcha-color-accent, #{getAccent($theme)});
+  }
+
+  .matcha-uploader-file__percent {
+    color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+  }
+
+  .matcha-uploader-file__check {
+    color: var(--matcha-color-feedback-success, #{getSuccess($theme)});
+  }
+
+  .matcha-uploader-file__error-text {
+    color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
+  }
+
+  .matcha-uploader-file__progress {
+    background: var(--matcha-color-border, #{getGrey($theme)});
+  }
+}
+
+// ── Dropzone Layout ─────────────────────────────────────────────────────────
+
+.matcha-uploader-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  // Figma matcha/uploader Dropzone: pad 32/24, gap 16, radius 8
+  gap: var(--matcha-space-200, 16px);
+  padding: var(--matcha-space-400, 32px) var(--matcha-space-300, 24px);
+  border: 2px dashed transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  cursor: pointer;
+  transition: background-color var(--matcha-duration-instant, 80ms) linear,
+              border-color var(--matcha-duration-instant, 80ms) linear;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.matcha-uploader-dropzone__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--matcha-icon-size-lg, 48px);
+  height: var(--matcha-icon-size-lg, 48px);
+  border-radius: var(--matcha-radius-pill, 9999px);
+}
+
+.matcha-uploader-dropzone__text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--matcha-space-050, 4px);
+  text-align: center;
+}
+
+.matcha-uploader-dropzone__title {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: var(--matcha-leading-body-md, 20px);
+}
+
+.matcha-uploader-dropzone__hint {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  line-height: var(--matcha-leading-body-sm, 16px);
+}
+
+// Hidden input
+.matcha-uploader-input {
+  display: none;
+}
+
+// ── File Item Layout ────────────────────────────────────────────────────────
+
+.matcha-uploader-file {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-150, 12px);
+  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  border: var(--matcha-border-hairline, 1px) solid transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+}
+
+.matcha-uploader-file__icon {
+  width: var(--matcha-space-500, 40px);
+  height: var(--matcha-space-500, 40px);
+  border-radius: var(--matcha-radius-md, 4px);
+  flex-shrink: 0;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.matcha-uploader-file__info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-050, 4px);
+  flex: 1;
+  min-width: 0;
+}
+
+.matcha-uploader-file__name {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-body-sm, 16px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.matcha-uploader-file__size {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-caption, 11px);
+}
+
+// ── Progress ──
+.matcha-uploader-file__progress {
+  width: 100%;
+  height: var(--matcha-border-medium, 4px);
+  border-radius: var(--matcha-radius-xs, 2px);
+  overflow: hidden;
+}
+
+.matcha-uploader-file__progress-fill {
+  height: 100%;
+  border-radius: var(--matcha-radius-xs, 2px);
+  transition: width var(--matcha-duration-moderate, 300ms) ease;
+}
+
+.matcha-uploader-file__percent {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  flex-shrink: 0;
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@include media-breakpoint('xs') {
+  .matcha-uploader-dropzone {
+    padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-uploader-dropzone,
+  .matcha-uploader-file__progress-fill {
+    transition: none;
+  }
+}