76 lines
2.7 KiB
HTML
76 lines
2.7 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en" data-theme="midnight" data-mode="dark">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Shared styling — integration check</title>
|
||
|
|
|
||
|
|
<!-- The contract. One stylesheet, every palette. SBN_BASE lets one copy of this file
|
||
|
|
be served from anywhere while still pointing at the service. -->
|
||
|
|
<link rel="stylesheet" href="/rt/v1/contract.css" id="contract-link">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* Host page styling, deliberately using only the unprefixed legacy aliases, which
|
||
|
|
is how the applications being consolidated are written today. If the alias layer
|
||
|
|
works, everything below is themed without a single rename. */
|
||
|
|
:root { --page-gap: 16px; }
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: var(--page-gap);
|
||
|
|
background: var(--bg);
|
||
|
|
color: var(--text);
|
||
|
|
font: 15px/1.5 ui-sans-serif, system-ui, sans-serif;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--line);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: calc(var(--page-gap) * 1.25);
|
||
|
|
margin-bottom: var(--page-gap);
|
||
|
|
}
|
||
|
|
h1 { margin: 0 0 4px; font-size: 1.25rem; }
|
||
|
|
.muted { color: var(--muted); }
|
||
|
|
.swatchrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
|
||
|
|
.swatchrow > div {
|
||
|
|
width: 44px; height: 28px; border-radius: 6px;
|
||
|
|
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
|
||
|
|
}
|
||
|
|
/* A rule that would wreck an unisolated injected component. */
|
||
|
|
.card button { all: unset; }
|
||
|
|
|
||
|
|
/* The shadow-root proof: this must not touch anything inside either component. */
|
||
|
|
button { font: inherit; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main>
|
||
|
|
<div class="card">
|
||
|
|
<h1>Shared styling</h1>
|
||
|
|
<p class="muted">This page uses only the unprefixed legacy aliases: <code>--bg</code>,
|
||
|
|
<code>--text</code>, <code>--line</code>, <code>--accent</code>.</p>
|
||
|
|
<div class="swatchrow" id="row"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h1>The controls</h1>
|
||
|
|
<p class="muted">Injected, not hand-written. Shadow DOM isolates them from the
|
||
|
|
<code>.card button {{ all: unset }}</code> rule above.</p>
|
||
|
|
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
|
||
|
|
<bananas-theme-selector id="selector"></bananas-theme-selector>
|
||
|
|
<bananas-appearance-toggle id="toggle" show-labels></bananas-appearance-toggle>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h1>Host page, after the components</h1>
|
||
|
|
<p class="muted">If component styles leaked, this card would change. It must not.</p>
|
||
|
|
<button id="host">A plain host button</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<pre id="state" class="card" style="font:12px/1.6 ui-monospace,monospace"></pre>
|
||
|
|
<div id="verdict" style="font:16px/1.4 monospace;padding:12px;border:2px solid #888"></div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script type="module" src="./contract-check.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|