josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Add Prettier and ESLint tooling (Refs #77)

Browse Source
This commit is contained in:
josh
2026-10-09 15:56:13 -04:00
parent 8ed059b8d3
commit 16469e2d43
711 changed files with 99737 additions and 28286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/ui/components/primitives/StatusPip.svelte
+55 -14
View File
@@ -16,7 +16,12 @@
const shape = $derived(statusShapes[resolvedTone]);
</script>
<span class="pip s-{size} t-{resolvedTone} shape-{shape}" role={label ? 'img' : undefined} aria-label={label ?? undefined} aria-hidden={label ? undefined : true}></span>
<span
class="pip s-{size} t-{resolvedTone} shape-{shape}"
role={label ? 'img' : undefined}
aria-label={label ?? undefined}
aria-hidden={label ? undefined : true}
></span>
<style>
.pip {
@@ -24,17 +29,53 @@
flex-shrink: 0;
box-sizing: border-box;
}
.s-sm { width: 10px; height: 10px; }
.s-md { width: 12px; height: 12px; }
.t-online { color: var(--state-online); }
.t-warning { color: var(--state-warning); }
.t-danger { color: var(--state-danger); }
.t-info { color: var(--state-info); }
.t-neutral { color: var(--state-neutral); }
.shape-circle { border-radius: 50%; background: currentColor; }
.shape-square { border-radius: 2px; background: currentColor; }
.shape-triangle { background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shape-hollow, .shape-ring { border: 2px solid currentColor; border-radius: 50%; }
.shape-ring { border-right-color: transparent; animation: status-spin 1s linear infinite; }
@keyframes status-spin { to { transform: rotate(360deg); } }
.s-sm {
width: 10px;
height: 10px;
}
.s-md {
width: 12px;
height: 12px;
}
.t-online {
color: var(--state-online);
}
.t-warning {
color: var(--state-warning);
}
.t-danger {
color: var(--state-danger);
}
.t-info {
color: var(--state-info);
}
.t-neutral {
color: var(--state-neutral);
}
.shape-circle {
border-radius: 50%;
background: currentColor;
}
.shape-square {
border-radius: 2px;
background: currentColor;
}
.shape-triangle {
background: currentColor;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.shape-hollow,
.shape-ring {
border: 2px solid currentColor;
border-radius: 50%;
}
.shape-ring {
border-right-color: transparent;
animation: status-spin 1s linear infinite;
}
@keyframes status-spin {
to {
transform: rotate(360deg);
}
}
</style>