@inchurch/matcha-theme 20.0.3

package/components/matcha-nav.scss

@@ -0,0 +1,450 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-nav.scss — Navigation system (nav-item, nav-rail, nav-panel, command-palette)
+// =============================================================================
+
+// ── Nav Item ─────────────────────────────────────────────────────────────────
+
+.matcha-nav-item {
+  position: relative; // enables ::before state layer positioning
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+  border-radius: var(--matcha-radius-md, 4px);
+  cursor: pointer;
+  transition: background-color 150ms;
+  width: 100%;
+  box-sizing: border-box;
+  text-decoration: none;
+  color: inherit;
+  user-select: none;
+
+  // State layer
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: currentColor;
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity var(--matcha-duration-instant, 80ms) linear;
+  }
+
+  &:hover:not(.matcha-nav-item--disabled)::before { opacity: var(--matcha-state-hover, 0.08); }
+  &:active:not(.matcha-nav-item--disabled)::before { opacity: var(--matcha-state-active, 0.12); }
+
+  &.matcha-nav-item--disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+}
+
+.matcha-nav-item__icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.matcha-nav-item__label {
+  flex: 1;
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: 400;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.matcha-nav-item__badge {
+  flex-shrink: 0;
+}
+
+.matcha-nav-item__chevron {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  opacity: 0.5;
+}
+
+// Indented variant (accordion children, Notion-style border)
+.matcha-nav-item--indented {
+  padding: var(--matcha-space-075, 6px) var(--matcha-space-100, 8px);
+  padding-left: var(--matcha-space-300, 24px);
+  border-radius: var(--matcha-radius-sm, 2px);
+  border-left: var(--matcha-border-thin, 2px) solid transparent;
+
+  .matcha-nav-item__label {
+    font-size: var(--matcha-text-body-sm, 12px);
+    line-height: 16px;
+  }
+}
+
+// ── Nav Rail (72px sidebar) ──────────────────────────────────────────────────
+
+.matcha-nav-rail {
+  display: flex;
+  flex-direction: column;
+  width: 64px;
+  height: 100%;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.matcha-nav-rail__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--matcha-grid-header-height, 56px);
+  flex-shrink: 0;
+}
+
+.matcha-nav-rail__modules {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--matcha-space-025, 2px);
+  padding: var(--matcha-space-050, 4px) 0;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  // Hide scrollbar but keep scroll
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+}
+
+.matcha-nav-rail__module {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--matcha-radius-lg, 8px);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition: background-color 150ms;
+
+  &:hover { opacity: 0.85; }
+}
+
+.matcha-nav-rail__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--matcha-space-025, 2px);
+  padding: var(--matcha-space-100, 8px) 0 var(--matcha-space-150, 12px);
+  flex-shrink: 0;
+}
+
+.matcha-nav-rail__divider {
+  width: 28px;
+  height: 1px;
+  opacity: 0.15;
+  margin: var(--matcha-space-050, 4px) 0;
+}
+
+// ── Nav Panel (216px sub-panel) ──────────────────────────────────────────────
+
+.matcha-nav-panel {
+  display: flex;
+  flex-direction: column;
+  width: 256px;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.matcha-nav-panel__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-200, 16px);
+  padding: var(--matcha-space-250, 20px) var(--matcha-space-250, 20px) var(--matcha-space-200, 16px);
+  flex-shrink: 0;
+}
+
+.matcha-nav-panel__brand {
+  height: 16px;
+}
+
+.matcha-nav-panel__divider {
+  width: 28px;
+  height: 1px;
+  opacity: 0.4;
+}
+
+.matcha-nav-panel__module {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.matcha-nav-panel__module-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.matcha-nav-panel__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-050, 4px);
+  padding: var(--matcha-space-150, 12px);
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+// ── Command Palette ──────────────────────────────────────────────────────────
+
+.matcha-command-palette-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20vh;
+  animation: matcha-cmd-overlay-in 150ms ease-out;
+}
+
+.matcha-command-palette {
+  display: flex;
+  flex-direction: column;
+  width: 520px;
+  max-width: calc(100vw - 32px);
+  max-height: 60vh;
+  border-radius: var(--matcha-radius-2xl, 24px);
+  overflow: hidden;
+  z-index: 9999;
+  animation: matcha-cmd-in 150ms ease-out;
+}
+
+.matcha-command-palette__search {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-150, 12px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-250, 20px);
+  flex-shrink: 0;
+}
+
+.matcha-command-palette__input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: var(--matcha-text-title-sm, 16px);
+  outline: none;
+}
+
+.matcha-command-palette__results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-025, 2px);
+  padding: var(--matcha-space-100, 8px);
+  flex: 1;
+  overflow-y: auto;
+}
+
+.matcha-command-palette__result {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-150, 12px);
+  padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+  border-radius: var(--matcha-radius-sm, 2px);
+  cursor: pointer;
+  transition: background-color 100ms;
+}
+
+.matcha-command-palette__footer {
+  display: flex;
+  align-items: center;
+  padding: var(--matcha-space-100, 8px) var(--matcha-space-250, 20px);
+  font-size: var(--matcha-text-caption, 11px);
+  flex-shrink: 0;
+}
+
+@keyframes matcha-cmd-in {
+  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes matcha-cmd-overlay-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-command-palette,
+  .matcha-command-palette-overlay,
+  .matcha-nav-item,
+  .matcha-nav-rail__module {
+    animation: none;
+    transition: none;
+  }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-nav-theme($theme) {
+  // ── Nav Item ──
+  .matcha-nav-item {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+
+    .matcha-nav-item__label {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    .matcha-nav-item__icon {
+      color: var(--matcha-color-hint, #{getGrey($theme)});
+    }
+
+    .matcha-nav-item__chevron {
+      color: var(--matcha-color-hint, #{getGrey($theme)});
+    }
+
+    &:hover {
+      background-color: rgba(var(--matcha-state-layer, 255,255,255), 0.08);
+    }
+
+    // Active state (current selected item)
+    &.matcha-nav-item--active {
+      background-color: var(--matcha-color-accent-surface-hover, #{getAccentAlpha($theme)});
+      border-left: 3px solid var(--matcha-color-accent, #{getAccent($theme)});
+
+      .matcha-nav-item__label {
+        color: var(--matcha-color-accent, #{getAccent($theme)});
+        font-weight: 500;
+      }
+
+      .matcha-nav-item__icon {
+        color: var(--matcha-color-accent, #{getAccent($theme)});
+      }
+    }
+
+    // Expanded (parent with open children — subtle bg highlight)
+    &.matcha-nav-item--expanded {
+      background-color: rgba(var(--matcha-state-layer, 255,255,255), 0.04);
+
+      .matcha-nav-item__label {
+        color: var(--matcha-color-accent, #{getAccent($theme)});
+        font-weight: 400;
+      }
+
+      .matcha-nav-item__icon {
+        color: var(--matcha-color-accent, #{getAccent($theme)});
+      }
+
+      .matcha-nav-item__chevron {
+        color: var(--matcha-color-accent, #{getAccent($theme)});
+        opacity: 0.7;
+      }
+    }
+
+    // Disabled
+    &.matcha-nav-item--disabled {
+      .matcha-nav-item__label,
+      .matcha-nav-item__icon {
+        color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+      }
+    }
+  }
+
+  // Indented (Notion-style border)
+  .matcha-nav-item--indented {
+    border-left-color: var(--matcha-color-accent, #{getAccent($theme)});
+
+    &.matcha-nav-item--active {
+      background-color: var(--matcha-color-accent-surface-hover, #{getAccentAlpha($theme)});
+      border-left: 3px solid var(--matcha-color-accent, #{getAccent($theme)});
+
+      .matcha-nav-item__label {
+        color: var(--matcha-color-accent, #{getAccent($theme)});
+        font-weight: 500;
+      }
+    }
+  }
+
+  // ── Nav Rail ──
+  .matcha-nav-rail {
+    background-color: var(--matcha-color-surface, #{getSurface($theme)});
+    border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+  }
+
+  .matcha-nav-rail__module {
+    color: var(--matcha-color-hint, #{getGrey($theme)});
+
+    &.matcha-nav-rail__module--active {
+      background-color: var(--matcha-color-accent-surface, #{getAccentAlpha($theme)});
+      color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+  }
+
+  .matcha-nav-rail__divider {
+    background-color: var(--matcha-color-border, #{getGrey($theme)});
+  }
+
+  // ── Nav Panel ──
+  .matcha-nav-panel {
+    background-color: var(--matcha-color-surface, #{getSurface($theme)});
+    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getForegroundAlpha($theme)});
+  }
+
+  .matcha-nav-panel__divider {
+    background-color: var(--matcha-color-border, #{getForegroundAlpha($theme)});
+  }
+
+  .matcha-nav-panel__module {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+
+  .matcha-nav-panel__module-icon {
+    color: var(--matcha-color-hint, #{getGrey($theme)});
+  }
+
+  // ── Command Palette ──
+  .matcha-command-palette-overlay {
+    background: var(--matcha-scrim-modal, rgba(0, 0, 0, 0.5));
+  }
+
+  .matcha-command-palette {
+    $is-dark: map.get($theme, is-dark);
+    background-color: var(--matcha-color-surface, #{getSurface($theme)});
+    box-shadow: var(--matcha-shadow-4, #{if($is-dark, $shadow-4-dark, $shadow-4-light)});
+
+    @if $is-dark {
+      border: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
+    }
+  }
+
+  .matcha-command-palette__input {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+
+    &::placeholder {
+      color: var(--matcha-color-hint, #{getGrey($theme)});
+    }
+  }
+
+  .matcha-command-palette__result {
+    color: var(--matcha-color-fg-secondary, #{getGrey($theme)});
+
+    &:hover,
+    &.matcha-command-palette__result--selected {
+      background-color: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+  }
+
+  .matcha-command-palette__footer {
+    background-color: var(--matcha-color-surface-bg, #{getBackground($theme)});
+    color: var(--matcha-color-hint, #{getGrey($theme)});
+  }
+}

package/components/matcha-notification.scss

@@ -0,0 +1,197 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-notification.scss — In-page notification banner / alert
+// Aligned with Figma matcha/notification:
+//   Status(5: Erro, Alerta, Sucesso, Ideia, Neutro)
+//   × Slots: icon, title, description, CTA button, close
+// Angular: matcha-notification
+// =============================================================================
+
+@mixin matcha-notification-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-notification {
+    // ── Base text colors ──
+    .matcha-notification__title {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    .matcha-notification__description {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+    }
+
+    .matcha-notification__close {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+
+      &: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);
+      }
+    }
+
+    // ── Status: Erro ──
+    &.matcha-notification--error {
+      background: var(--matcha-color-feedback-danger-alpha, #{getDangerAlpha($theme)});
+      border-left-color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
+
+      .matcha-notification__icon {
+        color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
+      }
+    }
+
+    // ── Status: Alerta ──
+    &.matcha-notification--warning {
+      background: var(--matcha-color-feedback-warn-alpha, #{getWarnAlpha($theme)});
+      border-left-color: var(--matcha-color-feedback-warn, #{getWarn($theme)});
+
+      .matcha-notification__icon {
+        color: var(--matcha-color-feedback-warn, #{getWarn($theme)});
+      }
+    }
+
+    // ── Status: Sucesso ──
+    &.matcha-notification--success {
+      background: var(--matcha-color-feedback-success-alpha, #{getSuccessAlpha($theme)});
+      border-left-color: var(--matcha-color-feedback-success, #{getSuccess($theme)});
+
+      .matcha-notification__icon {
+        color: var(--matcha-color-feedback-success, #{getSuccess($theme)});
+      }
+    }
+
+    // ── Status: Ideia / Info ──
+    &.matcha-notification--info {
+      background: var(--matcha-color-feedback-info-alpha, #{getInfoAlpha($theme)});
+      border-left-color: var(--matcha-color-feedback-info, #{getInfo($theme)});
+
+      .matcha-notification__icon {
+        color: var(--matcha-color-feedback-info, #{getInfo($theme)});
+      }
+    }
+
+    // ── Status: Neutro ──
+    &.matcha-notification--neutral {
+      background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+      border-left-color: var(--matcha-color-border, #{getGrey($theme)});
+
+      .matcha-notification__icon {
+        color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+      }
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-notification {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-150, 12px);
+  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  border-radius: var(--matcha-radius-lg, 8px);
+  border-left: var(--matcha-border-medium, 4px) solid transparent;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.matcha-notification__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--matcha-icon-size-md, 24px);
+  height: var(--matcha-icon-size-md, 24px);
+}
+
+.matcha-notification__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-050, 4px);
+  flex: 1;
+  min-width: 0;
+}
+
+.matcha-notification__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-notification__description {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-md, 20px);
+}
+
+.matcha-notification__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  flex-shrink: 0;
+}
+
+.matcha-notification__close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  position: relative;
+  overflow: hidden;
+  transition: color var(--matcha-duration-instant, 80ms) linear;
+
+  // State layer
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: currentColor;
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity var(--matcha-duration-instant, 80ms) linear;
+  }
+  &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+  &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@include media-breakpoint('xs') {
+  .matcha-notification {
+    flex-wrap: wrap;
+    gap: var(--matcha-space-100, 8px);
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+  }
+
+  .matcha-notification__body {
+    flex-basis: calc(100% - 56px); // icon + gap
+  }
+
+  .matcha-notification__actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-notification__close,
+  .matcha-notification__close::before {
+    transition: none;
+  }
+}