WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate legacy wire namespace to wrn
Quality / quality (ubuntu-latest) (push) Failing after 9m49s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-12 18:51:15 +05:30
parent ec23dd4c93
commit 2c960fc1dc
488 changed files with 27306 additions and 19063 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/skeleton.wrn
+15 -15
View File
@@ -7,42 +7,42 @@ component Skeleton {
class: string = ""
}
view {
<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 class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}">
{#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line"></span>{/each}
</div>
}
style {
.wire-skeleton-component {
--wire-skeleton-highlight: var(--wire-color-border);
.wrn-skeleton-component {
--wrn-skeleton-highlight: var(--wrn-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); }
.wrn-skeleton-component[data-size="xs"] { gap: 0.35rem; }
.wrn-skeleton-component[data-size="lg"],
.wrn-skeleton-component[data-size="xl"] { gap: 0.75rem; }
.wrn-skeleton-component[data-color="secondary"] { --wrn-skeleton-highlight: var(--wrn-color-secondary-soft); }
.wrn-skeleton-component[data-color="primary"] { --wrn-skeleton-highlight: var(--wrn-color-primary-soft); }
.wire-skeleton-component__line {
.wrn-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: linear-gradient(90deg, var(--wrn-color-surface-2), var(--wrn-skeleton-highlight), var(--wrn-color-surface-2));
background-size: 200% 100%;
animation: wire-skeleton-component-shimmer 1.4s infinite;
animation: wrn-skeleton-component-shimmer 1.4s infinite;
}
.wire-skeleton-component__line:last-child { width: 68%; }
.wrn-skeleton-component__line:last-child { width: 68%; }
@keyframes wire-skeleton-component-shimmer {
@keyframes wrn-skeleton-component-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.wire-skeleton-component__line { animation: none; }
.wrn-skeleton-component__line { animation: none; }
}
}
}