refactor(ui): localize progress and loading styles

2026-08-09 13:42:09 +05:30
parent fdf6282aed
commit b6bd5cfcb7
6 changed files with 151 additions and 63 deletions
@@ -7,8 +7,42 @@ component Skeleton {
    class: string = ""
  }
  view {
-    <div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--skeleton wire-next--size-{size} {class}" role="status" aria-label="{label}">
-      {#if "Skeleton" === "Skeleton"}{#each Array(lines).fill(0) as line}<span></span>{/each}{:else}<i aria-hidden="true"></i>{/if}
+    <div class="wire-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}">
+      {#each Array(lines).fill(0) as line}<span class="wire-skeleton-component__line"></span>{/each}
    </div>
  }
+
+  style {
+    .wire-skeleton-component {
+      --wire-skeleton-highlight: var(--wire-color-border);
+      display: grid;
+      width: min(100%, 24rem);
+      gap: 0.55rem;
+    }
+
+    .wire-skeleton-component[data-size="xs"] { gap: 0.35rem; }
+    .wire-skeleton-component[data-size="lg"],
+    .wire-skeleton-component[data-size="xl"] { gap: 0.75rem; }
+    .wire-skeleton-component[data-color="secondary"] { --wire-skeleton-highlight: var(--wire-color-secondary-soft); }
+    .wire-skeleton-component[data-color="primary"] { --wire-skeleton-highlight: var(--wire-color-primary-soft); }
+
+    .wire-skeleton-component__line {
+      height: 0.8rem;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--wire-color-surface-2), var(--wire-skeleton-highlight), var(--wire-color-surface-2));
+      background-size: 200% 100%;
+      animation: wire-skeleton-component-shimmer 1.4s infinite;
+    }
+
+    .wire-skeleton-component__line:last-child { width: 68%; }
+
+    @keyframes wire-skeleton-component-shimmer {
+      from { background-position: 200% 0; }
+      to { background-position: -200% 0; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-skeleton-component__line { animation: none; }
+    }
+  }
 }