@inchurch/matcha-theme 20.0.3

package/components/matcha-spinner.scss

@@ -0,0 +1,78 @@
+// =============================================================================
+// matcha-spinner.scss — Spinner loading indicator
+// Aligned with Figma matcha/spinner: Size(XS/SM/MD/LG/XL)
+// =============================================================================
+
+@mixin generate-matcha-spinner-size-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="xs"],
+            &[size#{$infix}="tiny"] {
+                svg { width: px-to-rem(24px); height: px-to-rem(24px); }
+            }
+
+            &[size#{$infix}="sm"],
+            &[size#{$infix}="small"] {
+                svg { width: px-to-rem(32px); height: px-to-rem(32px); }
+            }
+
+            &[size#{$infix}="md"],
+            &[size#{$infix}="medium"] {
+                svg { width: px-to-rem(40px); height: px-to-rem(40px); }
+            }
+
+            &[size#{$infix}="lg"],
+            &[size#{$infix}="large"] {
+                svg { width: px-to-rem(48px); height: px-to-rem(48px); }
+            }
+
+            &[size#{$infix}="xl"],
+            &[size#{$infix}="huge"] {
+                svg { width: px-to-rem(56px); height: px-to-rem(56px); }
+            }
+        }
+    }
+
+    &:not([size]) {
+        svg { width: px-to-rem(40px); height: px-to-rem(40px); }
+    }
+}
+
+// Theme mixin (kept from original — color loop)
+@mixin matcha-spinner-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,
+    );
+
+    matcha-spinner {
+        @include generate-matcha-spinner-size-classes($helper-breakpoints);
+
+        @each $colorName, $colorFn in $color-functions {
+            &[color="#{'' + $colorName}"] {
+                svg circle {
+                    stroke: call(#{$colorFn}, $theme);
+                }
+            }
+        }
+
+        &:not([color]) {
+            svg circle {
+                stroke: var(--matcha-color-accent, #{getAccent($theme)});
+            }
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        matcha-spinner svg {
+            animation-duration: 0s;
+        }
+    }
+}

package/components/matcha-stepper.scss

@@ -0,0 +1,177 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-stepper.scss — Step progress indicator
+// Aligned with Figma matcha/stepper/step:
+//   Estado(4: Completo, Ativo, Pendente, Disabled) × Tamanho(2: SM, MD)
+//   Connector lines between steps via CSS
+// =============================================================================
+
+@mixin matcha-stepper-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  matcha-stepper {
+    // ── Step indicators ──
+    .step-indicator-completo {
+      background: var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
+    }
+
+    .step-indicator-ativo {
+      background: var(--matcha-color-fg, #{getForeground($theme)});
+      color: var(--matcha-color-bg, #{getBackground($theme)});
+    }
+
+    .step-indicator-pendente,
+    .step-indicator-disabled {
+      background: var(--matcha-color-disabled, #{getDisabled($theme)});
+      color: var(--matcha-color-bg, #{getBackground($theme)});
+    }
+
+    // ── Labels ──
+    .step-label-completo {
+      color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    .step-label-ativo {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    .step-label-pendente,
+    .step-label-disabled {
+      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+    }
+
+    // ── Connector lines ──
+    .step-connector {
+      background: var(--matcha-color-disabled, #{getDisabled($theme)});
+    }
+
+    .step-connector-complete {
+      background: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    // ── Focus ──
+    .step-item: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-md, 4px);
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-stepper {
+  display: flex;
+  width: 100%;
+
+  // ── Horizontal (default) ──
+  &:not([orientation="vertical"]) {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--matcha-space-200, 16px);
+  }
+
+  // ── Vertical ──
+  &[orientation="vertical"] {
+    flex-direction: column;
+    gap: var(--matcha-space-200, 16px);
+  }
+}
+
+// ── Step item ──
+.step-item {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  cursor: default;
+  white-space: nowrap;
+
+  &.step-clickable {
+    cursor: pointer;
+  }
+
+  &.step-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+// ── Indicator circle ──
+.step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-family: var(--matcha-font-family);
+
+  &.step-sm {
+    width: var(--matcha-icon-size-md, 24px);
+    height: var(--matcha-icon-size-md, 24px);
+    font-size: var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-regular, 400);
+  }
+
+  &.step-md {
+    width: var(--matcha-space-400, 32px);
+    height: var(--matcha-space-400, 32px);
+    font-size: var(--matcha-text-title-sm, 16px);
+    font-weight: var(--matcha-weight-semibold, 600);
+  }
+
+  matcha-icon {
+    flex-shrink: 0;
+  }
+}
+
+// ── Label ──
+.step-label {
+  font-family: var(--matcha-font-family);
+
+  &.step-sm {
+    font-size: var(--matcha-text-body-md, 14px);
+    line-height: var(--matcha-leading-body-md, 20px);
+    font-weight: var(--matcha-weight-regular, 400);
+  }
+
+  &.step-md {
+    font-size: var(--matcha-text-title-sm, 16px);
+    line-height: var(--matcha-leading-title-sm, 22px);
+    font-weight: var(--matcha-weight-semibold, 600);
+  }
+
+  // Ativo SM gets medium weight
+  .step-item-ativo &.step-sm {
+    font-weight: var(--matcha-weight-medium, 500);
+  }
+}
+
+// ── Connector line ──
+.step-connector {
+  flex: 1;
+  height: var(--matcha-border-thin, 2px);
+  min-width: var(--matcha-space-200, 16px);
+
+  // Vertical connector
+  matcha-stepper[orientation="vertical"] & {
+    width: var(--matcha-border-thin, 2px);
+    height: var(--matcha-space-200, 16px);
+    min-width: auto;
+    flex: none;
+    margin-left: calc(var(--matcha-icon-size-md, 24px) / 2 - 1px);
+  }
+
+  matcha-stepper[orientation="vertical"].step-md & {
+    margin-left: calc(var(--matcha-space-400, 32px) / 2 - 1px);
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  .step-indicator,
+  .step-connector {
+    transition: none;
+  }
+}

package/components/matcha-table-cell.scss

@@ -0,0 +1,41 @@
+@mixin matcha-table-cell-theme($theme) {
+    .matcha-table{
+        .td-with-image,
+        .td-with-checkbox,
+        .td-with-icon,
+        .td-duble-line {
+            display: flex;
+            align-items: center;
+
+            .td-text-aside {
+                display: inline-block;
+                width: calc(100% - 48px);
+            }
+
+            .avatar {
+                width: 48px;
+                min-width: 48px;
+                height: 48px;
+                line-height: 48px;
+                border-width: 0;
+                margin-right: 24px;
+            }
+
+            .thumbnail {
+                width: 72px;
+                min-width: 72px;
+                height: 48px;
+                border-radius: var(--matcha-radius-lg, 8px);
+                margin: 0 8px 0 0;
+
+                &-portrait {
+                    width: 56px;
+                    min-width: 56px;
+                    height: 72px;
+                    border-radius: var(--matcha-radius-lg, 8px);
+                    margin: 0 8px 0 0;
+                }
+            }
+        }
+    }
+}