@inchurch/matcha-theme 20.0.3

package/components/matcha-slider.scss

@@ -0,0 +1,188 @@
+// =============================================================================
+// matcha-slider.scss — Slider (single + range)
+// Aligned with Figma matcha/slider: Type(Single/Range) × State(5) = 10 variants
+// =============================================================================
+
+@mixin matcha-slider-theme($theme) {
+  $color-functions: (
+    red: getRed, pink: getPink, purple: getPurple, deep-purple: getDeepPurple,
+    indigo: getIndigo, blue: getBlue, light-blue: getLightBlue, cyan: getCyan,
+    teal: getTeal, green: getGreen, light-green: getLightGreen, lime: getLime,
+    yellow: getYellow, amber: getAmber, orange: getOrange, deep-orange: getDeepOrange,
+    brown: getBrown, grey: getGrey, blue-grey: getBlueGrey,
+    primary: getPrimary, accent: getAccent, success: getSuccess,
+    warn: getWarn, danger: getDanger, info: getInfo, disabled: getDisabled,
+  );
+
+  .matcha-slider {
+    // Default accent
+    &[data-color="accent"] {
+      .selection-bar { background-color: var(--matcha-color-accent, #{getAccent($theme)}); }
+
+      .pointer {
+        background-color: var(--matcha-color-accent, #{getAccent($theme)});
+
+        &.focused { box-shadow: 0 0 0 4px var(--matcha-color-accent, #{getAccent($theme)}); }
+        &:hover { box-shadow: var(--matcha-shadow-1, #{$shadow-1-light}), 0 0 0 4px rgba(getAccent($theme), 0.24); } // ok: structural
+        &:active { box-shadow: var(--matcha-shadow-1, #{$shadow-1-light}), 0 0 0 4px rgba(getAccent($theme), 0.24); } // ok: structural
+      }
+    }
+
+    .slider-track {
+      background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+    }
+
+    // Dynamic colors
+    @each $colorName, $colorFn in $color-functions {
+      &[data-color="#{'' + $colorName}"] {
+        .selection-bar { background-color: call(#{$colorFn}, $theme); }
+
+        .pointer {
+          background-color: call(#{$colorFn}, $theme);
+          &.focused { box-shadow: 0 0 0 4px call(#{$colorFn}, $theme); }
+          &:hover { box-shadow: var(--matcha-shadow-1, #{$shadow-1-light}), 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24); } // ok: structural
+          &:active { box-shadow: var(--matcha-shadow-1, #{$shadow-1-light}), 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24); } // ok: structural
+        }
+      }
+    }
+
+    // Disabled
+    &.disabled {
+      .selection-bar { background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)}); }
+      .pointer { background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)}); }
+
+      .tick-value,
+      .pointer-label,
+      .floor-label,
+      .ceil-label {
+        color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+      }
+    }
+  }
+}
+
+// ── Structural ──────────────────────────────────────────────────────────────
+
+.matcha-slider {
+  position: relative;
+  width: 100%;
+  padding: var(--matcha-space-250, 20px) 0;
+  user-select: none;
+  background-color: transparent;
+
+  .slider-track {
+    position: relative;
+    height: var(--matcha-slider-track-height, 4px);
+    border-radius: var(--matcha-radius-sm, 2px);
+    cursor: pointer;
+    margin: 0 10px;
+  }
+
+  .selection-bar {
+    position: absolute;
+    height: 100%;
+    border-radius: var(--matcha-radius-sm, 2px);
+    transition: width 200ms ease;
+  }
+
+  // Figma matcha/slider thumb: 24×24 ellipse
+  .pointer {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--matcha-slider-pointer-size, 24px);
+    height: var(--matcha-slider-pointer-size, 24px);
+    border-radius: var(--matcha-radius-pill, 9999px);
+    cursor: grab;
+    border: 2px solid var(--matcha-color-surface, white);
+    box-shadow: var(--matcha-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.1));
+    transition: box-shadow var(--matcha-duration-instant, 80ms) linear,
+                transform var(--matcha-duration-instant, 80ms) ease;
+  }
+
+  // Figma value bubble: pad 2/6, radius 4, text 11/400/14 (caption)
+  .pointer-label {
+    position: absolute;
+    top: -24px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: var(--matcha-space-025, 2px) var(--matcha-space-075, 6px);
+    border-radius: var(--matcha-radius-md, 4px);
+    font-size: var(--matcha-text-caption, 11px);
+    font-weight: var(--matcha-weight-regular, 400);
+    line-height: var(--matcha-leading-caption, 14px);
+    white-space: nowrap;
+  }
+
+  // Figma ticks + floor/ceil labels: 11/400/14
+  .tick .tick-value {
+    position: absolute;
+    top: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: var(--matcha-text-caption, 11px);
+    line-height: var(--matcha-leading-caption, 14px);
+    white-space: nowrap;
+  }
+
+  .limit-labels {
+    display: flex;
+    justify-content: space-between;
+    margin: var(--matcha-space-100, 8px) 10px 0;
+    top: -18px;
+    position: relative;
+    font-size: var(--matcha-text-caption, 11px);
+    line-height: var(--matcha-leading-caption, 14px);
+  }
+
+  // ── Disabled ──
+  &.disabled {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+    pointer-events: none;
+    cursor: default;
+
+    .slider-track { cursor: default; }
+    .pointer { cursor: default; }
+  }
+
+  // ── Range ──
+  &.range {
+    .pointer {
+      &.low-pointer { z-index: 2; }
+      &.high-pointer { z-index: 1; }
+    }
+  }
+
+  // ── Dragging ──
+  &.dragging {
+    .pointer {
+      cursor: grabbing !important;
+      transform: translate(-50%, -50%) scale(1.1);
+      box-shadow: var(--matcha-shadow-2, 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12));
+    }
+
+    .selection-bar {
+      transition: none;
+    }
+  }
+
+  // ── Focus ring ──
+  .pointer:focus-visible {
+    outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #6200ee);
+    outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+  }
+
+  // ── High contrast ──
+  @media (prefers-contrast: high) {
+    .pointer { border-width: 3px; }
+    .selection-bar { border: var(--matcha-border-hairline, 1px) solid currentColor; }
+  }
+
+  // ── Reduced motion ──
+  @media (prefers-reduced-motion: reduce) {
+    .pointer,
+    .selection-bar {
+      transition: none;
+    }
+  }
+}

package/components/matcha-snack-bar.scss

@@ -0,0 +1,266 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-snack-bar.scss — Snack Bar / Toast (floating feedback)
+// Aligned with Figma matcha/snack-bar:
+//   Status(5: Erro, Alerta, Sucesso, Ideia, Neutro)
+//   Structure: Icon + Body(Title + Description) + CTA Button + Close
+//   Bg: surface/card solid + border-left status color + shadow level-3
+//
+// Diferença do Notification:
+//   Notification = in-page (bg alpha 10%, sem shadow)
+//   Snackbar = floating (bg sólido, shadow, position fixed)
+// =============================================================================
+
+// ── Structural ──────────────────────────────────────────────────────────────
+
+matcha-snack-bar {
+  position: fixed;
+  z-index: var(--matcha-z-snackbar, 9999);
+  right: var(--matcha-space-300, 24px);
+  top: var(--matcha-space-300, 24px);
+  transform: translateX(calc(100% + 40px));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--matcha-duration-moderate, 300ms) ease,
+    transform var(--matcha-duration-moderate, 300ms) ease;
+  min-width: var(--matcha-snackbar-min-width, 360px);
+  max-width: var(--matcha-snackbar-max-width, 520px);
+
+  // ── Position variants ──
+  &[position="bottom"] {
+    top: auto;
+    bottom: var(--matcha-space-300, 24px);
+  }
+
+  &[position="center"] {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%) translateY(-20px);
+  }
+
+  // ── Visible state ──
+  &.matcha-snack-bar-visible {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0);
+  }
+
+  &[position="center"].matcha-snack-bar-visible {
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+// ── Content container ───────────────────────────────────────────────────────
+
+.matcha-snack-bar-content {
+  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: var(--matcha-border-hairline, 1px) solid transparent;
+  border-left: var(--matcha-border-medium, 4px) solid transparent;
+}
+
+// ── Icon ────────────────────────────────────────────────────────────────────
+
+.matcha-snack-bar-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);
+}
+
+// ── Body (Title + Description) ──────────────────────────────────────────────
+
+.matcha-snack-bar-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-050, 4px);
+}
+
+.matcha-snack-bar-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-snack-bar-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);
+}
+
+// ── CTA Button ──────────────────────────────────────────────────────────────
+
+.matcha-snack-bar-action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 var(--matcha-space-100, 8px);
+  border: var(--matcha-border-thin, 2px) solid currentColor;
+  border-radius: var(--matcha-radius-lg, 8px);
+  background: transparent;
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-button-sm, 13px);
+  font-weight: var(--matcha-weight-medium, 500);
+  letter-spacing: 0.2px;
+  cursor: pointer;
+  color: inherit;
+  position: relative;
+  overflow: hidden;
+
+  // 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); }
+}
+
+// ── Close button ────────────────────────────────────────────────────────────
+
+.matcha-snack-bar-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);
+  color: inherit;
+  opacity: 0.7;
+  position: relative;
+  overflow: hidden;
+  transition: opacity 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); }
+  &:hover { opacity: 1; }
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@include media-breakpoint('xs') {
+  matcha-snack-bar {
+    left: var(--matcha-space-200, 16px);
+    right: var(--matcha-space-200, 16px);
+    min-width: auto;
+    max-width: none;
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  matcha-snack-bar,
+  .matcha-snack-bar-close::before,
+  .matcha-snack-bar-action::before {
+    transition: none;
+  }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-snack-bar-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  matcha-snack-bar {
+
+    // ── Focus rings ──
+    .matcha-snack-bar-close:focus-visible,
+    .matcha-snack-bar-action: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);
+    }
+
+    // ── Base (no status) ──
+    .matcha-snack-bar-content {
+      background: var(--matcha-color-surface, #{getSurface($theme)});
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+      border-color: var(--matcha-color-border, #{getGrey($theme)});
+      box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+    }
+
+    .matcha-snack-bar-title {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    .matcha-snack-bar-description {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+    }
+
+    // ── Status variants: border-left + icon/action color ──
+
+    &[color="error"] .matcha-snack-bar-content,
+    &[color="danger"] .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-danger, #{getDanger($theme)});
+
+      .matcha-snack-bar-icon,
+      .matcha-snack-bar-action { color: var(--matcha-color-danger, #{getDanger($theme)}); }
+    }
+
+    &[color="warning"] .matcha-snack-bar-content,
+    &[color="warn"] .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-warn, #{getWarn($theme)});
+
+      .matcha-snack-bar-icon,
+      .matcha-snack-bar-action { color: var(--matcha-color-warn, #{getWarn($theme)}); }
+    }
+
+    &[color="success"] .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-success, #{getSuccess($theme)});
+
+      .matcha-snack-bar-icon,
+      .matcha-snack-bar-action { color: var(--matcha-color-success, #{getSuccess($theme)}); }
+    }
+
+    &[color="info"] .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-info, #{getInfo($theme)});
+
+      .matcha-snack-bar-icon,
+      .matcha-snack-bar-action { color: var(--matcha-color-info, #{getInfo($theme)}); }
+    }
+
+    &[color="neutral"] .matcha-snack-bar-content {
+      border-left-color: var(--matcha-color-border, #{getGrey($theme)});
+
+      .matcha-snack-bar-icon { color: var(--matcha-color-text-hint, #{getBlueGrey($theme)}); }
+      .matcha-snack-bar-action { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
+    }
+  }
+}

package/components/matcha-spin.scss

@@ -0,0 +1,252 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-spin.scss — Circular progress/spinner (determinate + indeterminate)
+// Angular: matcha-spin
+// =============================================================================
+
+@mixin generate-matcha-spin-size-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="tiny"] {
+                width: px-to-rem(24px);
+                height: px-to-rem(24px);
+            }
+
+            &[size#{$infix}="small"] {
+                width: px-to-rem(32px);
+                height: px-to-rem(32px);
+            }
+
+            &[size#{$infix}="medium"] {
+                width: px-to-rem(40px);
+                height: px-to-rem(40px);
+            }
+
+            &[size#{$infix}="large"] {
+                width: px-to-rem(48px);
+                height: px-to-rem(48px);
+            }
+
+            &[size#{$infix}="huge"] {
+                width: px-to-rem(56px);
+                height: px-to-rem(56px);
+            }
+        }
+    }
+}
+
+@mixin matcha-spin($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    matcha-spin:not([color]) .spin-progress {
+        stroke: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    matcha-spin {
+
+        // Red
+        &[color="red"] .spin-progress {
+            stroke: getRed($theme);
+        }
+
+        // Pink
+        &[color="pink"] .spin-progress {
+            stroke: getPink($theme);
+        }
+
+        // Purple
+        &[color="purple"] .spin-progress {
+            stroke: getPurple($theme);
+        }
+
+        // Deep Purple
+        &[color="deep-purple"] .spin-progress {
+            stroke: getDeepPurple($theme);
+        }
+
+        // Indigo
+        &[color="indigo"] .spin-progress {
+            stroke: getIndigo($theme);
+        }
+
+        // Blue
+        &[color="blue"] .spin-progress {
+            stroke: getBlue($theme);
+        }
+
+        // Light Blue
+        &[color="light-blue"] .spin-progress {
+            stroke: getLightBlue($theme);
+        }
+
+        // Cyan
+        &[color="cyan"] .spin-progress {
+            stroke: getCyan($theme);
+        }
+
+        // Teal
+        &[color="teal"] .spin-progress {
+            stroke: getTeal($theme);
+        }
+
+        // Green
+        &[color="green"] .spin-progress {
+            stroke: getGreen($theme);
+        }
+
+        // Light Green
+        &[color="light-green"] .spin-progress {
+            stroke: getLightGreen($theme);
+        }
+
+        // Lime
+        &[color="lime"] .spin-progress {
+            stroke: getLime($theme);
+        }
+
+        // Yellow
+        &[color="yellow"] .spin-progress {
+            stroke: getYellow($theme);
+        }
+
+        // Amber
+        &[color="amber"] .spin-progress {
+            stroke: getAmber($theme);
+        }
+
+        // Orange
+        &[color="orange"] .spin-progress {
+            stroke: getOrange($theme);
+        }
+
+        // Deep Orange
+        &[color="deep-orange"] .spin-progress {
+            stroke: getDeepOrange($theme);
+        }
+
+        // Brown
+        &[color="brown"] .spin-progress {
+            stroke: getBrown($theme);
+        }
+
+        // Grey
+        &[color="grey"] .spin-progress {
+            stroke: getGrey($theme);
+        }
+
+        // Blue Grey
+        &[color="blue-grey"] .spin-progress {
+            stroke: getBlueGrey($theme);
+        }
+
+        // Accent
+        &[color="accent"] .spin-progress {
+            stroke: var(--matcha-color-accent, #{getAccent($theme)});
+        }
+
+        // Primary
+        &[color="primary"] .spin-progress {
+            stroke: var(--matcha-color-primary, #{getPrimary($theme)});
+        }
+
+        // Success
+        &[color="success"] .spin-progress {
+            stroke: var(--matcha-color-success, #{getSuccess($theme)});
+        }
+
+        // Warn
+        &[color="warn"] .spin-progress {
+            stroke: var(--matcha-color-warn, #{getWarn($theme)});
+        }
+
+        // Danger
+        &[color="danger"] .spin-progress {
+            stroke: var(--matcha-color-danger, #{getDanger($theme)});
+        }
+
+        // Info
+        &[color="info"] .spin-progress {
+            stroke: var(--matcha-color-info, #{getInfo($theme)});
+        }
+
+        .spin-placeholder {
+            stroke: var(--matcha-color-disabled, #{getDisabled($theme)});
+        }
+
+        &:not([size]) {
+            width: px-to-rem(40px);
+            height: px-to-rem(40px);
+        }
+
+        @include generate-matcha-spin-size-classes($helper-breakpoints);
+
+    }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-spin:not([progress]) .spin-progress {
+    animation:
+        matcha-spin-rotate 1.5s linear infinite,
+        matcha-spin-dash 1.5s ease-in-out infinite;
+}
+
+.matcha-spin {
+    display: inline-block;
+    position: relative;
+
+    svg {
+        transform: rotate(-90deg);
+        width: 100%;
+        height: 100%;
+    }
+
+    .spin-placeholder {
+        fill: none;
+    }
+
+    .spin-progress {
+        fill: none;
+        stroke-linecap: round;
+        transform-origin: center;
+        transition: stroke-dashoffset var(--matcha-duration-moderate, 300ms) linear;
+    }
+
+    @keyframes matcha-spin-rotate {
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes matcha-spin-dash {
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 100, 200;
+            stroke-dashoffset: -15;
+        }
+
+        100% {
+            stroke-dasharray: 100, 200;
+            stroke-dashoffset: -200;
+        }
+    }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+    matcha-spin:not([progress]) .spin-progress {
+        animation: none;
+    }
+
+    .matcha-spin .spin-progress {
+        transition: none;
+    }
+}