112 lines
2.7 KiB
Svelte
112 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
let {
|
|
density = "regular",
|
|
orientation = "horizontal",
|
|
tone = "accent",
|
|
}: {
|
|
density?: "regular" | "tight";
|
|
orientation?: "horizontal" | "vertical";
|
|
tone?: "neutral" | "accent" | "warning";
|
|
} = $props();
|
|
</script>
|
|
|
|
<div
|
|
class="signal-trace"
|
|
data-density={density}
|
|
data-orientation={orientation}
|
|
data-tone={tone}
|
|
aria-hidden="true"
|
|
>
|
|
<span class="signal-trace__rail"></span>
|
|
<span class="signal-trace__node" data-node="start"></span>
|
|
<span class="signal-trace__node" data-node="middle"></span>
|
|
<span class="signal-trace__node" data-node="end"></span>
|
|
</div>
|
|
|
|
<style>
|
|
.signal-trace {
|
|
--trace-color: var(--ui-color-accent);
|
|
--trace-track: min(100%, 20rem);
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 1.5rem;
|
|
}
|
|
|
|
.signal-trace__rail {
|
|
position: absolute;
|
|
inset: 50% 0 auto;
|
|
height: 1px;
|
|
background:
|
|
linear-gradient(90deg, transparent, var(--trace-color) 18%, var(--trace-color) 82%, transparent),
|
|
linear-gradient(90deg, transparent 0 35%, rgba(255, 255, 255, 0.42) 35% 38%, transparent 38%);
|
|
}
|
|
|
|
.signal-trace__node {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 0.55rem;
|
|
height: 0.55rem;
|
|
border: 1px solid var(--trace-color);
|
|
background: var(--ui-color-canvas);
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
|
|
.signal-trace__node[data-node="start"] {
|
|
left: 18%;
|
|
}
|
|
|
|
.signal-trace__node[data-node="middle"] {
|
|
left: 50%;
|
|
}
|
|
|
|
.signal-trace__node[data-node="end"] {
|
|
left: 82%;
|
|
}
|
|
|
|
.signal-trace[data-density="tight"] {
|
|
min-height: 0.95rem;
|
|
}
|
|
|
|
.signal-trace[data-density="tight"] .signal-trace__node {
|
|
width: 0.38rem;
|
|
height: 0.38rem;
|
|
}
|
|
|
|
.signal-trace[data-orientation="vertical"] {
|
|
width: 1.5rem;
|
|
min-height: 12rem;
|
|
}
|
|
|
|
.signal-trace[data-orientation="vertical"] .signal-trace__rail {
|
|
inset: 0 auto 0 50%;
|
|
width: 1px;
|
|
height: auto;
|
|
background:
|
|
linear-gradient(180deg, transparent, var(--trace-color) 18%, var(--trace-color) 82%, transparent),
|
|
linear-gradient(180deg, transparent 0 35%, rgba(255, 255, 255, 0.42) 35% 38%, transparent 38%);
|
|
}
|
|
|
|
.signal-trace[data-orientation="vertical"] .signal-trace__node[data-node="start"] {
|
|
top: 18%;
|
|
left: 50%;
|
|
}
|
|
|
|
.signal-trace[data-orientation="vertical"] .signal-trace__node[data-node="middle"] {
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
.signal-trace[data-orientation="vertical"] .signal-trace__node[data-node="end"] {
|
|
top: 82%;
|
|
left: 50%;
|
|
}
|
|
|
|
.signal-trace[data-tone="neutral"] {
|
|
--trace-color: var(--ui-color-line-strong);
|
|
}
|
|
|
|
.signal-trace[data-tone="warning"] {
|
|
--trace-color: var(--ui-color-warning);
|
|
}
|
|
</style>
|