@inchurch/matcha-theme 20.0.3

package/components/matcha-skeleton.scss

@@ -0,0 +1,138 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-skeleton.scss — Skeleton loading placeholder
+// Aligned with Figma matcha/skeleton: 6 tipos (Linha/Círculo/Retângulo/Card/Perfil/Tabela)
+// =============================================================================
+
+// ── Structural (no theme dependency) ────────────────────────────────────────
+
+.matcha-skeleton-card {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    border-radius: var(--matcha-radius-lg, 8px);
+    user-select: none;
+    overflow: hidden;
+}
+
+.matcha-skeleton-card__avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--matcha-radius-pill, 9999px);
+    margin: var(--matcha-space-200, 16px);
+}
+
+.matcha-skeleton-card__body {
+    display: flex;
+    flex-direction: column;
+    padding: var(--matcha-space-200, 16px);
+    gap: var(--matcha-space-200, 16px);
+}
+
+.matcha-skeleton-card__image {
+    display: flex;
+    flex-direction: column;
+    padding: var(--matcha-space-200, 16px);
+}
+
+.matcha-skeleton-line {
+    height: 16px;
+    width: 100%;
+    border-radius: var(--matcha-radius-pill, 9999px);
+}
+
+.matcha-skeleton-line--60 { width: 60%; }
+.matcha-skeleton-line--30 { width: 30%; }
+
+// ── Table skeleton ──────────────────────────────────────────────────────────
+
+.matcha-skeleton-table {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--matcha-radius-lg, 8px);
+    user-select: none;
+    overflow: hidden;
+}
+
+.matcha-skeleton-table__header {
+    display: flex;
+    flex-direction: column;
+    height: 64px;
+}
+
+.matcha-skeleton-table__row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    align-items: center;
+    gap: var(--matcha-space-200, 16px);
+    height: 80px;
+    padding: 0 var(--matcha-space-200, 16px);
+}
+
+.matcha-skeleton-table__cell {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--matcha-space-200, 16px);
+    width: 100%;
+}
+
+.matcha-skeleton-table__cell-avatar {
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    min-height: 48px;
+    border-radius: var(--matcha-radius-pill, 9999px);
+    flex-shrink: 0;
+}
+
+.matcha-skeleton-table__cell-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--matcha-space-200, 16px);
+    width: 100%;
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-skeleton-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    .matcha-skeleton-line,
+    .matcha-skeleton-card__avatar,
+    .matcha-skeleton-card__image,
+    .matcha-skeleton-table__header,
+    .matcha-skeleton-table__cell-avatar {
+        background: var(--matcha-color-surface-card-alpha, #{getSurfaceAlpha($theme)});
+    }
+
+    .matcha-skeleton-table__row--alt {
+        background: var(--matcha-color-surface-bg-alpha, #{getBackgroundAlpha($theme)});
+    }
+
+    .skeleton-animated-background {
+        background: linear-gradient(
+            to right,
+            var(--matcha-color-disabled-bg, #{getDisabled($theme)}),
+            #{if($is-dark, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.5))},
+            var(--matcha-color-disabled-bg, #{getDisabled($theme)})
+        );
+        background-size: 200% 100%;
+        animation: matcha-skeleton-shimmer 1s linear infinite;
+    }
+
+    @keyframes matcha-skeleton-shimmer {
+        0% { background-position: 100% 0; }
+        100% { background-position: -100% 0; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .skeleton-animated-background {
+            animation: none;
+            background: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+        }
+    }
+}