308 lines
16 KiB
HTML
308 lines
16 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>lvl0/ui — style reference</title>
|
||
|
|
<meta name="theme-color" content="#000000">
|
||
|
|
<link rel="stylesheet" href="./styles.css">
|
||
|
|
</head>
|
||
|
|
<body class="bg-black antialiased min-h-screen font-mono text-primary p-6 lg:p-10">
|
||
|
|
<main class="mx-auto w-full max-w-4xl">
|
||
|
|
|
||
|
|
<header class="mb-14">
|
||
|
|
<h1 class="text-primary text-4xl lg:text-5xl font-bold uppercase tracking-widest glow-red-text mb-4">
|
||
|
|
> lvl0/ui
|
||
|
|
</h1>
|
||
|
|
<p class="text-primary/60 text-sm max-w-2xl leading-relaxed">
|
||
|
|
The shared visual style for lvl0 projects. This page is built with the package it
|
||
|
|
documents, so it breaks visibly if the package does. Read the values here rather
|
||
|
|
than from another project.
|
||
|
|
</p>
|
||
|
|
<p class="text-primary/40 text-xs mt-4">
|
||
|
|
<a href="https://forge.lvl0.xyz/lvl0/ui" class="hover:text-primary transition-colors">[SOURCE]</a>
|
||
|
|
<span class="text-bordeaux px-2">|</span>
|
||
|
|
<code>npm i git+ssh://git@forge.lvl0.xyz:2222/lvl0/ui.git#v0.1.0</code>
|
||
|
|
</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-10">
|
||
|
|
|
||
|
|
<!-- PALETTE -->
|
||
|
|
<section class="mb-16">
|
||
|
|
<h2 class="text-primary text-xs uppercase tracking-wider mb-1">> Palette</h2>
|
||
|
|
<p class="text-primary/50 text-xs mb-6">Click a value to copy. Use token names, never raw <code>red-*</code> steps.</p>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
|
|
<!-- swatch: primary -->
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux">
|
||
|
|
<div class="h-20" style="background: var(--color-primary)"></div>
|
||
|
|
<div class="p-3 text-xs">
|
||
|
|
<div class="text-primary font-bold">--color-primary</div>
|
||
|
|
<button class="copy text-primary/50 hover:text-primary transition-colors mt-1" data-v="oklch(63.7% 0.237 25.331)">oklch(63.7% 0.237 25.331)</button>
|
||
|
|
<p class="text-primary/40 mt-2 leading-snug">House red. Text, active borders, focus, glow source.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux">
|
||
|
|
<div class="h-20" style="background: var(--color-bordeaux)"></div>
|
||
|
|
<div class="p-3 text-xs">
|
||
|
|
<div class="text-primary font-bold">--color-bordeaux</div>
|
||
|
|
<button class="copy text-primary/50 hover:text-primary transition-colors mt-1" data-v="oklch(25.8% 0.092 26.042)">oklch(25.8% 0.092 26.042)</button>
|
||
|
|
<p class="text-primary/40 mt-2 leading-snug">Secondary. Dividers, resting borders, recessed chrome.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux">
|
||
|
|
<div class="h-20 border-b-2 border-bordeaux" style="background: var(--color-background)"></div>
|
||
|
|
<div class="p-3 text-xs">
|
||
|
|
<div class="text-primary font-bold">--color-background</div>
|
||
|
|
<button class="copy text-primary/50 hover:text-primary transition-colors mt-1" data-v="oklch(10% 0 0)">oklch(10% 0 0)</button>
|
||
|
|
<p class="text-primary/40 mt-2 leading-snug">Near-black page ground.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux">
|
||
|
|
<div class="h-20 border-b-2 border-bordeaux" style="background: var(--color-card)"></div>
|
||
|
|
<div class="p-3 text-xs">
|
||
|
|
<div class="text-primary font-bold">--color-card</div>
|
||
|
|
<button class="copy text-primary/50 hover:text-primary transition-colors mt-1" data-v="oklch(12% 0 0)">oklch(12% 0 0)</button>
|
||
|
|
<p class="text-primary/40 mt-2 leading-snug">Raised surface.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux">
|
||
|
|
<div class="h-20" style="background: var(--color-muted)"></div>
|
||
|
|
<div class="p-3 text-xs">
|
||
|
|
<div class="text-primary font-bold">--color-muted</div>
|
||
|
|
<button class="copy text-primary/50 hover:text-primary transition-colors mt-1" data-v="oklch(20% 0 0)">oklch(20% 0 0)</button>
|
||
|
|
<p class="text-primary/40 mt-2 leading-snug">Muted surface.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux">
|
||
|
|
<div class="h-20" style="background: var(--color-muted-foreground)"></div>
|
||
|
|
<div class="p-3 text-xs">
|
||
|
|
<div class="text-primary font-bold">--color-muted-foreground</div>
|
||
|
|
<button class="copy text-primary/50 hover:text-primary transition-colors mt-1" data-v="oklch(50% 0.1 25)">oklch(50% 0.1 25)</button>
|
||
|
|
<p class="text-primary/40 mt-2 leading-snug">Muted text.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux">
|
||
|
|
<div class="h-20" style="background: var(--color-destructive)"></div>
|
||
|
|
<div class="p-3 text-xs">
|
||
|
|
<div class="text-primary font-bold">--color-destructive</div>
|
||
|
|
<button class="copy text-primary/50 hover:text-primary transition-colors mt-1" data-v="oklch(57.7% 0.245 27.325)">oklch(57.7% 0.245 27.325)</button>
|
||
|
|
<p class="text-primary/40 mt-2 leading-snug">Destructive actions.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 class="text-primary/60 text-xs uppercase tracking-wider mt-8 mb-3">Chart colours</h3>
|
||
|
|
<div class="grid grid-cols-5 gap-2">
|
||
|
|
<div class="border-2 border-bordeaux"><div class="h-12" style="background: var(--color-chart-1)"></div><div class="p-2 text-[10px] text-primary/50">chart-1</div></div>
|
||
|
|
<div class="border-2 border-bordeaux"><div class="h-12" style="background: var(--color-chart-2)"></div><div class="p-2 text-[10px] text-primary/50">chart-2</div></div>
|
||
|
|
<div class="border-2 border-bordeaux"><div class="h-12" style="background: var(--color-chart-3)"></div><div class="p-2 text-[10px] text-primary/50">chart-3</div></div>
|
||
|
|
<div class="border-2 border-bordeaux"><div class="h-12" style="background: var(--color-chart-4)"></div><div class="p-2 text-[10px] text-primary/50">chart-4</div></div>
|
||
|
|
<div class="border-2 border-bordeaux"><div class="h-12" style="background: var(--color-chart-5)"></div><div class="p-2 text-[10px] text-primary/50">chart-5</div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-primary/40 text-xs mt-4">
|
||
|
|
<code class="text-primary/60">--radius: 0</code> — square corners throughout.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-10">
|
||
|
|
|
||
|
|
<!-- GLOWS -->
|
||
|
|
<section class="mb-16">
|
||
|
|
<h2 class="text-primary text-xs uppercase tracking-wider mb-1">> Glows</h2>
|
||
|
|
<p class="text-primary/50 text-xs mb-6">
|
||
|
|
The part a values table cannot convey. All four against the real background.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||
|
|
<div>
|
||
|
|
<div class="border-2 border-primary glow-red p-6 mb-3 text-center text-sm">.glow-red</div>
|
||
|
|
<p class="text-primary/40 text-xs leading-snug">
|
||
|
|
Box-shadow bloom in primary, brightening on <code>:hover</code> and
|
||
|
|
<code>:focus</code>. For bordered elements that are active or focusable.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="p-6 mb-3 text-center">
|
||
|
|
<span class="text-primary text-2xl font-bold uppercase tracking-widest glow-red-text">.glow-red-text</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-primary/40 text-xs leading-snug">
|
||
|
|
Two-layer text-shadow. <strong class="text-primary/70">Use this on text</strong> —
|
||
|
|
<code>.glow-red</code> haloes the element's box, which smudges around a
|
||
|
|
borderless heading instead of tracing the letters.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux p-6 mb-3 text-center text-sm">.glow-bordeaux</div>
|
||
|
|
<p class="text-primary/40 text-xs leading-snug">
|
||
|
|
Softer bloom for bordeaux-bordered elements. <strong class="text-primary/70">Emits
|
||
|
|
primary-tinted light, not bordeaux</strong> — bordeaux at
|
||
|
|
<code>oklch(25.8%)</code> is too dark to bloom against a near-black ground,
|
||
|
|
so a bordeaux halo is invisible. Dim element, brighter glow, as CRT
|
||
|
|
phosphor behaves.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="p-6 mb-3 flex items-center">
|
||
|
|
<hr class="w-full border-0 border-t-2 border-bordeaux glow-bordeaux-line">
|
||
|
|
</div>
|
||
|
|
<p class="text-primary/40 text-xs leading-snug">
|
||
|
|
<code>.glow-bordeaux-line</code> — a single wide shadow on a hairline has no
|
||
|
|
box to hug and just fades out. This uses a tight core plus a wider spill so a
|
||
|
|
2px rule reads as lit.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-10">
|
||
|
|
|
||
|
|
<!-- FONT -->
|
||
|
|
<section class="mb-16">
|
||
|
|
<h2 class="text-primary text-xs uppercase tracking-wider mb-1">> Font</h2>
|
||
|
|
<p class="text-primary/50 text-xs mb-6">
|
||
|
|
<code>.font-digital</code> — 7-Segment by
|
||
|
|
<a href="http://torinak.com/7segment" class="underline hover:text-primary">Jan Bobrowski</a>,
|
||
|
|
SIL OFL 1.1. <code>fonts/OFL.txt</code> must ship wherever the font does.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux p-6 mb-4">
|
||
|
|
<div class="font-digital text-primary text-6xl mb-4">0123456789</div>
|
||
|
|
<div class="font-digital text-primary text-3xl mb-4">0123456789</div>
|
||
|
|
<div class="font-digital text-primary text-lg">0123456789</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="border-2 border-destructive p-4">
|
||
|
|
<p class="text-primary/60 text-xs leading-snug">
|
||
|
|
<strong class="text-primary">Numerals only.</strong> Letters render badly —
|
||
|
|
the face has no strokes for most of them:
|
||
|
|
</p>
|
||
|
|
<div class="font-digital text-primary/50 text-2xl mt-3">ABCDEFGHIJKLM</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-10">
|
||
|
|
|
||
|
|
<!-- USAGE -->
|
||
|
|
<section class="mb-16">
|
||
|
|
<h2 class="text-primary text-xs uppercase tracking-wider mb-6">> Primary or bordeaux?</h2>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 text-xs">
|
||
|
|
<div class="border-2 border-primary glow-red p-5">
|
||
|
|
<h3 class="text-primary font-bold uppercase tracking-wider mb-3">Primary</h3>
|
||
|
|
<ul class="text-primary/60 space-y-2 leading-snug">
|
||
|
|
<li>> All text</li>
|
||
|
|
<li>> Focused input borders</li>
|
||
|
|
<li>> Borders of clickable things</li>
|
||
|
|
<li>> Filled button backgrounds on hover</li>
|
||
|
|
<li>> The source colour of every glow</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="border-2 border-bordeaux glow-bordeaux p-5">
|
||
|
|
<h3 class="text-primary font-bold uppercase tracking-wider mb-3">Bordeaux</h3>
|
||
|
|
<ul class="text-primary/60 space-y-2 leading-snug">
|
||
|
|
<li>> Dividers and rules</li>
|
||
|
|
<li>> Resting input borders</li>
|
||
|
|
<li>> Panel outlines</li>
|
||
|
|
<li>> Row separators</li>
|
||
|
|
<li>> Scrollbar thumbs</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-primary/40 text-xs mt-5 leading-relaxed">
|
||
|
|
The contrast is full red against bordeaux — never two brightnesses of red. An
|
||
|
|
element commonly moves from bordeaux to primary on focus, with its glow rising at
|
||
|
|
the same time, so the state change is signalled twice.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-10">
|
||
|
|
|
||
|
|
<!-- WORKED EXAMPLE -->
|
||
|
|
<section class="mb-16">
|
||
|
|
<h2 class="text-primary text-xs uppercase tracking-wider mb-1">> Worked example</h2>
|
||
|
|
<p class="text-primary/50 text-xs mb-6">
|
||
|
|
The anagram-finder form and results panel — the whole system in one screen.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="border-2 border-bordeaux p-6">
|
||
|
|
<label for="demo" class="block text-primary text-xs uppercase tracking-wider mb-2">> Letters</label>
|
||
|
|
<input
|
||
|
|
id="demo"
|
||
|
|
type="text"
|
||
|
|
value="eamstoxil"
|
||
|
|
autocomplete="off"
|
||
|
|
class="w-full bg-black border-bordeaux text-primary focus:border-primary text-3xl tracking-wider uppercase rounded-none border-2 focus:ring-0 focus:outline-none transition-all glow-bordeaux px-4 py-3 mb-4"
|
||
|
|
>
|
||
|
|
|
||
|
|
<div class="flex gap-3 mb-8">
|
||
|
|
<button class="w-2/3 bg-black hover:bg-primary text-primary hover:text-black text-sm font-bold border-primary rounded-none border-2 uppercase tracking-wider transition-all glow-bordeaux cursor-pointer px-4 py-2">
|
||
|
|
[FIND WORDS]
|
||
|
|
</button>
|
||
|
|
<a href="#" class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-bordeaux text-primary/60 hover:text-primary text-sm font-bold border-bordeaux hover:border-primary rounded-none border-2 glow-bordeaux uppercase tracking-wider transition-all px-4 py-2">
|
||
|
|
[CLEAR]
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-8">
|
||
|
|
|
||
|
|
<section class="border-bordeaux rounded-none border-2 glow-bordeaux">
|
||
|
|
<h3 class="text-primary text-xs uppercase tracking-wider border-bordeaux border-b-2 glow-bordeaux-line px-4 py-2">
|
||
|
|
> 3 matches
|
||
|
|
</h3>
|
||
|
|
<ul class="divide-bordeaux divide-y text-[1.3125rem] max-h-48 overflow-y-auto scrollbar-red">
|
||
|
|
<li class="flex items-baseline justify-between px-4 py-1.5 text-primary hover:bg-bordeaux">
|
||
|
|
<span>steam</span><span class="font-digital text-primary text-2xl">5</span>
|
||
|
|
</li>
|
||
|
|
<li class="flex items-baseline justify-between px-4 py-1.5 text-primary hover:bg-bordeaux">
|
||
|
|
<span>mates</span><span class="font-digital text-primary text-2xl">5</span>
|
||
|
|
</li>
|
||
|
|
<li class="flex items-baseline justify-between px-4 py-1.5 text-primary hover:bg-bordeaux">
|
||
|
|
<span>exalt</span><span class="font-digital text-primary text-2xl">5</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer class="border-t border-bordeaux pt-4 flex flex-wrap items-center justify-between gap-2 text-xs uppercase tracking-wider text-primary/40">
|
||
|
|
<span>
|
||
|
|
@lvl0/ui 0.1.0
|
||
|
|
<span class="text-bordeaux px-1">|</span>
|
||
|
|
a <a href="https://lvl0.xyz" class="hover:text-primary transition-colors">lvl0</a> project
|
||
|
|
</span>
|
||
|
|
<a href="https://forge.lvl0.xyz/lvl0/ui" rel="license" class="hover:text-primary transition-colors">[SOURCE]</a>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.querySelectorAll('.copy').forEach((b) => {
|
||
|
|
b.addEventListener('click', async () => {
|
||
|
|
try {
|
||
|
|
await navigator.clipboard.writeText(b.dataset.v);
|
||
|
|
const original = b.textContent;
|
||
|
|
b.textContent = 'copied';
|
||
|
|
setTimeout(() => { b.textContent = original; }, 1000);
|
||
|
|
} catch (e) {
|
||
|
|
/* clipboard unavailable over plain http — leave the value visible */
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|