@inchurch/matcha-theme 20.0.3

package/components/matcha-chip.scss

@@ -0,0 +1,212 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-chip.scss — Theme mixin + structural styles
+// =============================================================================
+
+// ── Structural (outside mixin — no theme dependency) ─────────────────────────
+
+matcha-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
+  // Figma matcha/chip: 36 height (8+20+8), label 14/500/20
+  font-size: var(--matcha-text-md, 14px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-body-md, 20px);
+  cursor: default;
+  white-space: nowrap;
+  user-select: none;
+  overflow: hidden;
+  border: var(--matcha-border-thin, 2px) solid transparent;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  position: relative;
+  transition: border-color 200ms ease, box-shadow 200ms ease;
+
+  // 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;
+  }
+
+  // Figma: shadow-1 + subtle darken on hover — darken is achieved via state layer opacity (not filter)
+  &:hover:not([disabled]):not(.matcha-chip-disabled) {
+    box-shadow: var(--matcha-shadow-1, 0 1px 3px rgba(0,0,0,0.12));
+  }
+  &:hover:not([disabled]):not(.matcha-chip-disabled)::before  { opacity: var(--matcha-state-hover, 0.12); }
+  &:active:not([disabled]):not(.matcha-chip-disabled)::before { opacity: var(--matcha-state-active, 0.16); }
+
+  &[disabled],
+  &.matcha-chip-disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  &:not([disabled]):not(.matcha-chip-disabled) {
+    cursor: pointer;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+    &::before { transition: none; }
+  }
+}
+
+.matcha-chip-content {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.matcha-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--matcha-icon-size-sm, 16px);
+  height: var(--matcha-icon-size-sm, 16px);
+  margin-left: var(--matcha-space-100, 8px);
+  margin-right: -4px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  outline: none;
+  transition: opacity 0.2s;
+
+  // State-layer 12% on hover (Figma spec)
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: currentColor;
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity 80ms linear;
+  }
+  &:hover:not([disabled])::before { opacity: 0.12; }
+  &:focus-visible:not([disabled])::before { opacity: 0.12; }
+
+  &[disabled] {
+    cursor: default;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.matcha-chip-remove-icon {
+  font-size: var(--matcha-text-title-md, 18px);
+  line-height: 1; // 18/18 ratio — matches font-size
+  color: inherit;
+}
+
+.matcha-chip-list-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--matcha-space-100, 8px);
+  align-items: center;
+
+  &.matcha-chip-list-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+// ── Theme mixin ──────────────────────────────────────────────────────────────
+
+@mixin matcha-chip-theme($theme) {
+  // Mapa de cores sem\u00e2nticas \u2014 mesmo pattern do matcha-button
+  $chip-colors: (
+    primary: (getPrimary, getPrimaryContrast),
+    accent:  (getAccent,  getAccentContrast),
+    success: (getSuccess, getSuccessContrast),
+    warn:    (getWarn,    getWarnContrast),
+    danger:  (getDanger,  getDangerContrast),
+    info:    (getInfo,    getInfoContrast),
+  );
+
+  matcha-chip {
+    border-color: var(--matcha-color-hint, #{getGrey($theme)});
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+
+    // Per-color rules (outline default: border + text = cor, fundo transparente)
+    @each $name, $fns in $chip-colors {
+      $fn: nth($fns, 1);
+      $fnContrast: nth($fns, 2);
+
+      &[color="#{$name}"] {
+        border-color: call(get-function(#{$fn}), $theme);
+        color: call(get-function(#{$fn}), $theme);
+
+        // Selected na cor: filled com contraste
+        &.matcha-chip-selected,
+        &[selected] {
+          background-color: call(get-function(#{$fn}), $theme);
+          color: call(get-function(#{$fnContrast}), $theme);
+
+          .matcha-chip-remove-icon {
+            color: call(get-function(#{$fnContrast}), $theme);
+          }
+        }
+      }
+    }
+
+    // Selected state (fallback — quando n\u00e3o tem color, usa accent)
+    &.matcha-chip-selected,
+    &[selected] {
+      &:not([color]) {
+        background-color: var(--matcha-color-accent, #{getAccent($theme)});
+        border-color: var(--matcha-color-accent, #{getAccent($theme)});
+        color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
+
+        .matcha-chip-remove-icon {
+          color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
+        }
+      }
+    }
+
+    // Disabled
+    &[disabled],
+    &.matcha-chip-disabled {
+      border-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+      color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+
+      .matcha-chip-remove-icon {
+        color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+      }
+    }
+
+    // Focus ring
+    &:focus-within {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid
+               var(--matcha-color-primary, #{getPrimary($theme)});
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+  }
+
+  .matcha-chip-remove {
+    color: var(--matcha-color-hint, #{getGrey($theme)});
+  }
+
+  // Chip list disabled
+  .matcha-chip-list-disabled,
+  [matcha-chip-list][disabled] {
+    pointer-events: none;
+
+    matcha-chip {
+      border-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+      color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+    }
+  }
+}

package/components/matcha-color-pick.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-color-pick.scss — Color picker with radio selection
+// Aligned with Figma matcha/color-pick
+// Angular: matcha-color-pick
+// =============================================================================
+
+@mixin matcha-color-pick-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-color-pick {
+    .is-selected {
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-surface, #{getSurface($theme)});
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-color-pick {
+  .mat-radio-group {
+    .mat-radio-button {
+      .mat-radio-label {
+        .mat-radio-label-content {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .is-selected {
+    border-radius: var(--matcha-radius-lg, 8px);
+  }
+}

package/components/matcha-command-palette.scss

@@ -0,0 +1,89 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-command-palette.scss — Command Palette (⌘K)
+// Aligned with Figma matcha/command-palette:
+//   Container with 3 slots: search, results, footer-tips
+//   Overlay global, radius 16px
+// Angular: matcha-command-palette
+// =============================================================================
+
+@mixin matcha-command-palette-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-command-palette {
+    background: var(--matcha-color-surface, #{getSurface($theme)});
+    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+    box-shadow: var(--matcha-shadow-4, #{if($is-dark, $shadow-4-dark, $shadow-4-light)});
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+
+  .matcha-command-palette-search {
+    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
+
+    input {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+
+      &::placeholder {
+        color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+      }
+    }
+  }
+
+  .matcha-command-palette-footer {
+    background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-command-palette {
+  display: flex;
+  flex-direction: column;
+  width: 520px;
+  max-height: 400px;
+  border-radius: var(--matcha-radius-xl, 16px);
+  overflow: hidden;
+}
+
+.matcha-command-palette-search {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-150, 12px);
+  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  min-height: 52px;
+
+  input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    line-height: var(--matcha-leading-body-md, 20px);
+    outline: none;
+  }
+}
+
+.matcha-command-palette-results {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--matcha-space-100, 8px);
+}
+
+.matcha-command-palette-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-200, 16px);
+  padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+  font-size: var(--matcha-text-caption, 11px);
+  min-height: 38px;
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-command-palette {
+    transition: none;
+  }
+}

package/components/matcha-crop.scss

@@ -0,0 +1,172 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-crop.scss — Image cropper modal
+// Aligned with Figma matcha/crop:
+//   Ratio(2: 16:9, 1:1) — Crop area with overlay mask
+// Angular: matcha-crop (wraps cropper logic inside matcha-modal)
+// =============================================================================
+
+@mixin matcha-crop-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-crop {
+    .matcha-crop__header {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    .matcha-crop__overlay {
+      background: rgba(#212121, 0.6); // ok: structural
+    }
+
+    .matcha-crop__area {
+      border: var(--matcha-border-thin, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    .matcha-crop__grid-line {
+      background: rgba(#ffffff, 0.3); // ok: structural
+    }
+
+    .matcha-crop__canvas {
+      background: var(--matcha-color-surface-inverse, #{if($is-dark, getSurface($theme), #121212)});
+    }
+
+    .matcha-crop__handle {
+      background: var(--matcha-color-surface, #{getSurface($theme)});
+      border-color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-crop {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.matcha-crop__header {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+  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);
+}
+
+.matcha-crop__canvas {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  min-height: 300px;
+}
+
+.matcha-crop__image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.matcha-crop__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.matcha-crop__area {
+  position: absolute;
+  box-sizing: border-box;
+  cursor: move;
+  touch-action: none;
+}
+
+// ── Aspect ratios ──
+.matcha-crop__area--16x9 {
+  aspect-ratio: 16 / 9;
+}
+
+.matcha-crop__area--1x1 {
+  aspect-ratio: 1 / 1;
+  border-radius: 0;
+}
+
+.matcha-crop__area--1x1-circle {
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+}
+
+// ── Rule of thirds grid ──
+.matcha-crop__grid {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  pointer-events: none;
+}
+
+.matcha-crop__grid-line {
+  &:nth-child(1) { grid-column: 2; grid-row: 1 / 4; width: var(--matcha-border-hairline, 1px); }
+  &:nth-child(2) { grid-column: 3; grid-row: 1 / 4; width: var(--matcha-border-hairline, 1px); }
+  &:nth-child(3) { grid-column: 1 / 4; grid-row: 2; height: var(--matcha-border-hairline, 1px); }
+  &:nth-child(4) { grid-column: 1 / 4; grid-row: 3; height: var(--matcha-border-hairline, 1px); }
+}
+
+// ── Resize handles ──
+.matcha-crop__handle {
+  position: absolute;
+  width: var(--matcha-space-150, 12px);
+  height: var(--matcha-space-150, 12px);
+  border: var(--matcha-border-thin, 2px) solid transparent;
+  border-radius: 50%;
+  pointer-events: auto;
+
+  // Offset negativo = -6px = -(handle/2) pra centralizar no canto
+  &--nw { top: calc(-1 * var(--matcha-space-075, 6px)); left: calc(-1 * var(--matcha-space-075, 6px)); cursor: nw-resize; }
+  &--ne { top: calc(-1 * var(--matcha-space-075, 6px)); right: calc(-1 * var(--matcha-space-075, 6px)); cursor: ne-resize; }
+  &--sw { bottom: calc(-1 * var(--matcha-space-075, 6px)); left: calc(-1 * var(--matcha-space-075, 6px)); cursor: sw-resize; }
+  &--se { bottom: calc(-1 * var(--matcha-space-075, 6px)); right: calc(-1 * var(--matcha-space-075, 6px)); cursor: se-resize; }
+}
+
+// ── Footer ──
+.matcha-crop__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@include media-breakpoint('xs') {
+  .matcha-crop__header {
+    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  }
+
+  .matcha-crop__footer {
+    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  }
+
+  .matcha-crop__canvas {
+    min-height: 240px;
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-crop__area,
+  .matcha-crop__image {
+    transition: none;
+  }
+}

package/components/matcha-date.scss

@@ -0,0 +1,81 @@
+// =========================================================
+// * Matcha Date Styles
+// =========================================================
+
+@mixin matcha-date-theme($theme) {
+  .matcha-date-input {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+
+    &::placeholder {
+      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    }
+
+    &:disabled {
+      opacity: var(--matcha-opacity-disabled, 0.38);
+      color: var(--matcha-color-disabled, #{getDisabled($theme)});
+    }
+  }
+}
+
+.matcha-date-input {
+  width: 100%;
+  font-size: var(--matcha-text-body-md, 14px);
+  font-family: inherit;
+  line-height: 1.5;
+  color: var(--matcha-text-primary, #333);
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  &::placeholder {
+    color: var(--matcha-text-placeholder, #999);
+  }
+
+  &:disabled {
+    pointer-events: none; cursor: default;
+    opacity: 0.6;
+    color: var(--matcha-text-disabled, #999);
+  }
+
+  // Customização do ícone do calendário
+  &::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    filter: opacity(0.6);
+    transition: filter 0.2s ease;
+
+    &:hover {
+      filter: opacity(1);
+    }
+  }
+
+  &:disabled::-webkit-calendar-picker-indicator {
+    pointer-events: none; cursor: default;
+    opacity: 0.3;
+  }
+
+  // Firefox
+  &::-moz-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &:disabled::-moz-calendar-picker-indicator {
+    pointer-events: none; cursor: default;
+    opacity: 0.3;
+  }
+}
+
+// Integração com matcha-form-field
+matcha-form-field {
+  matcha-date {
+    width: 100%;
+    display: block;
+  }
+}
+

package/components/matcha-divider.scss

@@ -0,0 +1,45 @@
+// =============================================================================
+// matcha-divider.scss — Divider line (horizontal/vertical)
+// Aligned with Figma matcha/divider: Direção(Horizontal/Vertical) = 2 variants
+// =============================================================================
+
+// ── Structural ──────────────────────────────────────────────────────────────
+
+matcha-divider {
+  display: flex;
+  box-sizing: border-box;
+  flex-shrink: 0;
+
+  &[direction="horizontal"],
+  &:not([direction]) {
+    flex-direction: row;
+    width: 100%;
+
+    .matcha-divider-line {
+      width: 100%;
+      height: 0;
+      border-top: var(--matcha-border-hairline, 1px) solid;
+    }
+  }
+
+  &[direction="vertical"] {
+    flex-direction: column;
+    align-self: stretch;
+
+    .matcha-divider-line {
+      width: 0;
+      height: 100%;
+      border-left: var(--matcha-border-hairline, 1px) solid;
+    }
+  }
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-divider-theme($theme) {
+  matcha-divider {
+    .matcha-divider-line {
+      border-color: var(--matcha-color-border, #{getGrey($theme)});
+    }
+  }
+}

package/components/matcha-draggable.scss

@@ -0,0 +1,24 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-draggable.scss — Draggable item with selection state
+// Angular: matcha-draggable
+// =============================================================================
+
+@mixin matcha-draggable-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-draggable {
+    .check-with-label:checked + .label-for-check {
+      box-shadow:
+        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface, #{getSurface($theme)}),
+        0 0 0 10px var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    }
+
+    .is-selected {
+      box-shadow:
+        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface, #{getSurface($theme)}),
+        0 0 0 10px var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    }
+  }
+}