mirror of
https://github.com/olehomelchenko/astrolabe.git
synced 2026-08-08 02:02:33 +00:00
1713 lines
57 KiB
HTML
1713 lines
57 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="light" data-accent="teal">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Astrolabe · Visual Specimen</title>
|
|
|
|
<!--
|
|
Standalone design specimen for docs/architecture/09-visual-design.md.
|
|
NOT part of the app — a kitchen sink to eyeball the tokens and catch
|
|
technical bugs before porting values into styles/tokens.css.
|
|
|
|
Fonts: IBM Plex via CDN for preview convenience ONLY. Production self-hosts
|
|
via @fontsource (offline/PWA). If offline, system fallbacks kick in.
|
|
-->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<style>
|
|
/* ============================================================
|
|
TOKENS — the design contract (docs/architecture/09)
|
|
============================================================ */
|
|
:root {
|
|
/* Type */
|
|
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
|
|
/* Spacing — 8px base unit (2/4 as sub-steps) */
|
|
--space-1: 2px;
|
|
--space-2: 4px;
|
|
--space-3: 8px;
|
|
--space-4: 12px;
|
|
--space-5: 16px;
|
|
--space-6: 24px;
|
|
--space-7: 32px;
|
|
--space-8: 48px;
|
|
--space-9: 64px;
|
|
|
|
/* Shape — square chrome */
|
|
--radius: 0px;
|
|
--border-width: 1px;
|
|
|
|
/* Motion — productive only */
|
|
--dur-fast: 70ms;
|
|
--dur-fast-2: 110ms;
|
|
--dur-moderate: 150ms;
|
|
--ease: cubic-bezier(0.2, 0, 0.38, 0.9);
|
|
|
|
/* Status (light defaults; overridden in dark) */
|
|
--support-error: #da1e28;
|
|
--support-success: #198038;
|
|
--support-warning: #f1c21b;
|
|
--support-info: #0043ce;
|
|
--on-status: #ffffff;
|
|
}
|
|
|
|
/* --- Neutral roles: LIGHT theme (Carbon gray ramp) --- */
|
|
[data-theme='light'] {
|
|
--bg: #ffffff;
|
|
--layer-01: #f4f4f4;
|
|
--layer-02: #e0e0e0;
|
|
--border: #e0e0e0;
|
|
--border-strong: #c6c6c6;
|
|
--text: #161616;
|
|
--text-secondary: #525252;
|
|
--text-placeholder: #a8a8a8;
|
|
}
|
|
|
|
/* --- Neutral roles: DARK theme --- */
|
|
[data-theme='dark'] {
|
|
--bg: #161616;
|
|
--layer-01: #262626;
|
|
--layer-02: #393939;
|
|
--border: #393939;
|
|
--border-strong: #525252;
|
|
--text: #f4f4f4;
|
|
--text-secondary: #a8a8a8;
|
|
--text-placeholder: #6f6f6f;
|
|
--support-error: #fa4d56;
|
|
--support-success: #42be65;
|
|
--support-warning: #f1c21b;
|
|
--support-info: #78a9ff;
|
|
--on-status: #161616;
|
|
}
|
|
|
|
/* Soft accent — derived wash (mirrors styles/tokens.css). References --accent
|
|
+ --bg, so it follows whatever accent/theme is active. */
|
|
[data-theme] {
|
|
--accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
|
|
--accent-soft-hover: color-mix(in srgb, var(--accent) 20%, var(--bg));
|
|
}
|
|
|
|
/* --- Accent: the FREE, swappable layer (theme-aware). Deep teal is the
|
|
default; see styles/tokens.css for the shipped source of truth. --- */
|
|
[data-accent='teal'] {
|
|
--accent: #0e7490;
|
|
--accent-hover: #0c5f77;
|
|
--accent-contrast: #fff;
|
|
}
|
|
[data-accent='blue'] {
|
|
--accent: #0f62fe;
|
|
--accent-hover: #0353e9;
|
|
--accent-contrast: #fff;
|
|
}
|
|
[data-accent='indigo'] {
|
|
--accent: #5b54e6;
|
|
--accent-hover: #4a43d6;
|
|
--accent-contrast: #fff;
|
|
}
|
|
[data-accent='amber'] {
|
|
--accent: #b45309;
|
|
--accent-hover: #92400e;
|
|
--accent-contrast: #fff;
|
|
}
|
|
[data-accent='rose'] {
|
|
--accent: #be123c;
|
|
--accent-hover: #9f1239;
|
|
--accent-contrast: #fff;
|
|
}
|
|
/* Brighter accents on the dark canvas (compound selector wins on specificity) */
|
|
[data-theme='dark'][data-accent='teal'] {
|
|
--accent: #2dd4bf;
|
|
--accent-hover: #5eead4;
|
|
--accent-contrast: #161616;
|
|
}
|
|
[data-theme='dark'][data-accent='blue'] {
|
|
--accent: #78a9ff;
|
|
--accent-hover: #a6c8ff;
|
|
--accent-contrast: #161616;
|
|
}
|
|
[data-theme='dark'][data-accent='indigo'] {
|
|
--accent: #8b85f0;
|
|
--accent-hover: #a29bf5;
|
|
--accent-contrast: #161616;
|
|
}
|
|
[data-theme='dark'][data-accent='amber'] {
|
|
--accent: #fbbf24;
|
|
--accent-hover: #fcd34d;
|
|
--accent-contrast: #161616;
|
|
}
|
|
[data-theme='dark'][data-accent='rose'] {
|
|
--accent: #fb7185;
|
|
--accent-hover: #fda4af;
|
|
--accent-contrast: #161616;
|
|
}
|
|
|
|
:root {
|
|
--focus: var(--accent);
|
|
}
|
|
|
|
/* ============================================================
|
|
BASE
|
|
============================================================ */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
}
|
|
body {
|
|
font-family: var(--font-sans);
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
transition:
|
|
background var(--dur-moderate) var(--ease),
|
|
color var(--dur-moderate) var(--ease);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
}
|
|
code,
|
|
pre,
|
|
.mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
a {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Shared focus ring (accessibility — always visible on keyboard focus) */
|
|
:where(button, input, select, textarea, [tabindex], a):focus-visible {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================================
|
|
CONTROL BAR
|
|
============================================================ */
|
|
.controls {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-5);
|
|
padding: var(--space-4) var(--space-6);
|
|
background: var(--layer-01);
|
|
border-bottom: var(--border-width) solid var(--border);
|
|
}
|
|
.controls strong {
|
|
font-size: 13px;
|
|
}
|
|
.controls .group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
.controls label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.seg {
|
|
display: inline-flex;
|
|
border: var(--border-width) solid var(--border-strong);
|
|
}
|
|
.seg button {
|
|
font: inherit;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
padding: var(--space-2) var(--space-4);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border: none;
|
|
border-right: var(--border-width) solid var(--border-strong);
|
|
}
|
|
.seg button:last-child {
|
|
border-right: none;
|
|
}
|
|
.seg button[aria-pressed='true'] {
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
}
|
|
.swatch-btn {
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 2px solid transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.swatch-btn[aria-pressed='true'] {
|
|
border-color: var(--text);
|
|
}
|
|
|
|
/* ============================================================
|
|
LAYOUT
|
|
============================================================ */
|
|
main {
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
padding: var(--space-8) var(--space-6) var(--space-9);
|
|
}
|
|
section {
|
|
margin-bottom: var(--space-9);
|
|
}
|
|
section > h2 {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
padding-bottom: var(--space-3);
|
|
margin-bottom: var(--space-6);
|
|
border-bottom: var(--border-width) solid var(--border);
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-5);
|
|
align-items: center;
|
|
}
|
|
.stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
.muted {
|
|
color: var(--text-secondary);
|
|
}
|
|
.cap {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ----- Typography specimen ----- */
|
|
.type-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-5);
|
|
padding: var(--space-2) 0;
|
|
}
|
|
.type-row .tag {
|
|
width: 120px;
|
|
flex: 0 0 120px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.t-display {
|
|
font-size: 42px;
|
|
font-weight: 300;
|
|
line-height: 1.15;
|
|
}
|
|
.t-h1 {
|
|
font-size: 32px;
|
|
}
|
|
.t-h2 {
|
|
font-size: 24px;
|
|
}
|
|
.t-h3 {
|
|
font-size: 20px;
|
|
}
|
|
.t-h4 {
|
|
font-size: 16px;
|
|
}
|
|
.t-body {
|
|
font-size: 14px;
|
|
}
|
|
.t-caption {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.t-code {
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ----- Color swatches ----- */
|
|
.swatches {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
.swatch {
|
|
border: var(--border-width) solid var(--border);
|
|
}
|
|
.swatch .chip {
|
|
height: 56px;
|
|
}
|
|
.swatch .meta {
|
|
padding: var(--space-3);
|
|
background: var(--layer-01);
|
|
font-size: 11px;
|
|
}
|
|
.swatch .meta .name {
|
|
display: block;
|
|
font-weight: 600;
|
|
}
|
|
.swatch .meta .val {
|
|
font-family: var(--font-mono);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ----- Spacing scale ----- */
|
|
.space-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
}
|
|
.space-row .tag {
|
|
width: 80px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.space-bar {
|
|
height: 16px;
|
|
background: var(--accent);
|
|
}
|
|
|
|
/* ----- Elevation ----- */
|
|
.elev {
|
|
padding: var(--space-6);
|
|
border: var(--border-width) solid var(--border);
|
|
}
|
|
.elev .inner {
|
|
padding: var(--space-5);
|
|
}
|
|
|
|
/* ----- Buttons ----- */
|
|
.btn {
|
|
font: inherit;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
height: 40px;
|
|
padding: 0 var(--space-5);
|
|
border: var(--border-width) solid transparent;
|
|
border-radius: var(--radius);
|
|
transition:
|
|
background var(--dur-fast) var(--ease),
|
|
border-color var(--dur-fast) var(--ease);
|
|
}
|
|
.btn.sm {
|
|
height: 32px;
|
|
font-size: 13px;
|
|
padding: 0 var(--space-4);
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border-color: var(--border-strong);
|
|
}
|
|
.btn-secondary:hover {
|
|
background: var(--layer-01);
|
|
}
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--accent);
|
|
}
|
|
.btn-ghost:hover {
|
|
background: var(--layer-01);
|
|
}
|
|
/* Header utility ghost: text-coloured, recedes; hover steps up one layer. */
|
|
.btn-ghost-util {
|
|
background: transparent;
|
|
color: var(--text);
|
|
gap: var(--space-2);
|
|
}
|
|
.btn-ghost-util:hover {
|
|
background: var(--layer-02);
|
|
}
|
|
/* Soft-accent: a low-emphasis accent wash (Donate) — noticed, not shouting. */
|
|
.btn-soft {
|
|
background: var(--accent-soft);
|
|
color: var(--accent-hover);
|
|
}
|
|
.btn-soft:hover {
|
|
background: var(--accent-soft-hover);
|
|
}
|
|
.hdr-divider {
|
|
width: var(--border-width);
|
|
height: 20px;
|
|
background: var(--border-strong);
|
|
margin: 0 var(--space-2);
|
|
}
|
|
.btn-danger {
|
|
background: var(--support-error);
|
|
color: var(--on-status);
|
|
}
|
|
.btn-danger:hover {
|
|
filter: brightness(0.92);
|
|
}
|
|
.btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ----- Fields ----- */
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
max-width: 280px;
|
|
}
|
|
.field label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
/* Field-on-layer (arch 09 §3.3): a field is a layer above its surface, so it
|
|
steps toward --bg (white) with a --border-strong outline — on the canvas
|
|
and on a gray panel alike — never a darker-gray fill. */
|
|
.input,
|
|
.select,
|
|
.textarea {
|
|
font: inherit;
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
border: var(--border-width) solid var(--border-strong);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-3) var(--space-4);
|
|
}
|
|
.input::placeholder,
|
|
.textarea::placeholder {
|
|
color: var(--text-placeholder);
|
|
}
|
|
.input:focus,
|
|
.select:focus,
|
|
.textarea:focus {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: -1px;
|
|
border-color: var(--accent);
|
|
}
|
|
.textarea {
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
min-height: 96px;
|
|
resize: vertical;
|
|
}
|
|
.search {
|
|
position: relative;
|
|
max-width: 280px;
|
|
}
|
|
.search .input {
|
|
width: 100%;
|
|
padding-left: 36px;
|
|
}
|
|
.search svg {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* checkbox / radio / toggle */
|
|
.check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
cursor: pointer;
|
|
}
|
|
.check input {
|
|
accent-color: var(--accent);
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.toggle {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 22px;
|
|
flex: 0 0 40px;
|
|
}
|
|
.toggle input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.toggle .track {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--border-strong);
|
|
transition: background var(--dur-fast) var(--ease);
|
|
}
|
|
.toggle .knob {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #fff;
|
|
transition: transform var(--dur-fast) var(--ease);
|
|
}
|
|
.toggle input:checked + .track {
|
|
background: var(--accent);
|
|
}
|
|
.toggle input:checked + .track + .knob {
|
|
transform: translateX(18px);
|
|
}
|
|
.toggle input:focus-visible + .track {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ----- Tags / status ----- */
|
|
.tag-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: 12px;
|
|
padding: var(--space-1) var(--space-3);
|
|
border: var(--border-width) solid var(--border-strong);
|
|
}
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
.dot.draft {
|
|
/* Accent, not a warning hue: a draft / unpublished-changes state is
|
|
neutral, not a problem (arch/10 §6 status-indicator resolution + council). */
|
|
background: var(--accent);
|
|
}
|
|
.dot.published {
|
|
background: var(--support-success);
|
|
}
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: var(--space-1) var(--space-3);
|
|
color: var(--on-status);
|
|
}
|
|
|
|
/* ----- Snippet list rows ----- */
|
|
.list {
|
|
border: var(--border-width) solid var(--border);
|
|
max-width: 320px;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-left: 2px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
.item + .item {
|
|
border-top: var(--border-width) solid var(--border);
|
|
}
|
|
.item:hover {
|
|
background: var(--layer-01);
|
|
}
|
|
.item.active {
|
|
background: var(--layer-01);
|
|
border-left-color: var(--accent);
|
|
}
|
|
.item .main {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
.item .name {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.item .sub {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
/* Fixed-width slot so the draft dot (shown only on dirty rows) never shifts
|
|
the date — published rows keep an empty slot and stay aligned. */
|
|
.item .indicator {
|
|
flex: 0 0 auto;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
.item .del {
|
|
opacity: 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: var(--space-1);
|
|
display: flex;
|
|
}
|
|
.item:hover .del {
|
|
opacity: 1;
|
|
}
|
|
.item .del:hover {
|
|
color: var(--support-error);
|
|
}
|
|
|
|
/* ----- Panel / card ----- */
|
|
.panel {
|
|
background: var(--layer-01);
|
|
border: var(--border-width) solid var(--border);
|
|
padding: var(--space-6);
|
|
max-width: 320px;
|
|
}
|
|
.panel h4 {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.meta-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 13px;
|
|
padding: var(--space-2) 0;
|
|
}
|
|
.meta-row .k {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ----- Tabs ----- */
|
|
.tabs {
|
|
display: inline-flex;
|
|
border-bottom: var(--border-width) solid var(--border);
|
|
}
|
|
.tabs button {
|
|
font: inherit;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
padding: var(--space-3) var(--space-5);
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
}
|
|
.tabs button[aria-selected='true'] {
|
|
color: var(--text);
|
|
border-bottom-color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ----- Toasts ----- */
|
|
.toast {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
background: var(--layer-02);
|
|
border: var(--border-width) solid var(--border);
|
|
border-left-width: 3px;
|
|
padding: var(--space-3) var(--space-5);
|
|
font-size: 13px;
|
|
max-width: 360px;
|
|
}
|
|
.toast.info {
|
|
border-left-color: var(--support-info);
|
|
}
|
|
.toast.success {
|
|
border-left-color: var(--support-success);
|
|
}
|
|
.toast.warning {
|
|
border-left-color: var(--support-warning);
|
|
}
|
|
.toast.error {
|
|
border-left-color: var(--support-error);
|
|
}
|
|
|
|
/* ----- Overlay dialog (confirm / alert) ----- */
|
|
/* Shown inline on a dimmed stage — the real one is a fixed full-screen
|
|
overlay (src/app/components/ConfirmDialog). Mirror its look only. */
|
|
.dialog-stage {
|
|
display: flex;
|
|
align-items: flex-start; /* each card sizes to its own content, not the tallest */
|
|
gap: var(--space-5);
|
|
flex-wrap: wrap;
|
|
padding: var(--space-7) var(--space-6);
|
|
background: rgb(0 0 0 / 0.5);
|
|
}
|
|
.dialog {
|
|
width: 100%;
|
|
max-width: 28rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
padding: var(--space-6);
|
|
background: var(--layer-01);
|
|
border: var(--border-width) solid var(--border);
|
|
box-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
|
|
}
|
|
.dialog h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.dialog p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
color: var(--text-secondary);
|
|
}
|
|
.dialog .actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-2);
|
|
}
|
|
/* Secondary's default hover fill (--layer-01) equals the card bg, so it
|
|
would read as dead. Mirror the real ConfirmDialog: hover to --layer-02. */
|
|
.dialog .btn-secondary:hover {
|
|
background: var(--layer-02);
|
|
}
|
|
|
|
/* ----- Code surface ----- */
|
|
.code {
|
|
background: var(--layer-01);
|
|
border: var(--border-width) solid var(--border);
|
|
padding: var(--space-5);
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
overflow: auto;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* ----- Motion demo ----- */
|
|
.motion-box {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: var(--accent);
|
|
transition:
|
|
transform var(--dur-moderate) var(--ease),
|
|
opacity var(--dur-moderate) var(--ease);
|
|
}
|
|
.motion-stage.go .motion-box {
|
|
transform: translateX(220px);
|
|
opacity: 0.4;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="controls">
|
|
<strong>Astrolabe · Visual Specimen</strong>
|
|
<div class="group">
|
|
<label>Theme</label>
|
|
<div class="seg" id="theme">
|
|
<button data-theme-val="light" aria-pressed="true">Light</button>
|
|
<button data-theme-val="dark" aria-pressed="false">Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="group">
|
|
<label>Accent</label>
|
|
<div class="row" id="accent" style="gap: var(--space-3)">
|
|
<button
|
|
class="swatch-btn"
|
|
data-accent-val="teal"
|
|
aria-pressed="true"
|
|
style="background: #0e7490"
|
|
title="Teal"
|
|
></button>
|
|
<button
|
|
class="swatch-btn"
|
|
data-accent-val="blue"
|
|
aria-pressed="false"
|
|
style="background: #0f62fe"
|
|
title="Blue"
|
|
></button>
|
|
<button
|
|
class="swatch-btn"
|
|
data-accent-val="indigo"
|
|
aria-pressed="false"
|
|
style="background: #5b54e6"
|
|
title="Indigo"
|
|
></button>
|
|
<button
|
|
class="swatch-btn"
|
|
data-accent-val="amber"
|
|
aria-pressed="false"
|
|
style="background: #b45309"
|
|
title="Amber"
|
|
></button>
|
|
<button
|
|
class="swatch-btn"
|
|
data-accent-val="rose"
|
|
aria-pressed="false"
|
|
style="background: #be123c"
|
|
title="Rose"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<span class="cap">Structure is rigorous · color is free — swap freely.</span>
|
|
</div>
|
|
|
|
<main>
|
|
<!-- TYPOGRAPHY -->
|
|
<section>
|
|
<h2>Typography — IBM Plex</h2>
|
|
<div class="type-row">
|
|
<span class="tag">display 42/300</span><span class="t-display">Astrolabe</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="tag">h1 32/600</span><span class="t-h1">A spec is a snippet</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="tag">h2 24/600</span><span class="t-h2">A spec is a snippet</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="tag">h3 20/600</span><span class="t-h3">A spec is a snippet</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="tag">h4 16/600</span><span class="t-h4">A spec is a snippet</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="tag">body 14/400</span
|
|
><span class="t-body"
|
|
>The quick brown fox edits a Vega-Lite spec and watches it render.</span
|
|
>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="tag">caption 12</span><span class="t-caption">Last modified · Today</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="tag">mono 13</span
|
|
><span class="t-code"
|
|
>{ "mark": "bar", "encoding": { "x": { "field": "category" } } }</span
|
|
>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- COLOR -->
|
|
<section>
|
|
<h2>Color — neutral ramp (borrowed) · accent & status (free / meaning)</h2>
|
|
<p class="cap">
|
|
Neutrals come from the Carbon gray ramp for legibility; the accent and themes are open.
|
|
Status colors carry meaning only.
|
|
</p>
|
|
<h4 style="margin: var(--space-5) 0 var(--space-4)">Surface roles (current theme)</h4>
|
|
<div class="swatches" id="roleSwatches"></div>
|
|
<h4 style="margin: var(--space-6) 0 var(--space-4)">Accent & status</h4>
|
|
<div class="swatches" id="accentSwatches"></div>
|
|
</section>
|
|
|
|
<!-- SPACING -->
|
|
<section>
|
|
<h2>Spacing — 8px base unit</h2>
|
|
<div class="stack" id="spaceScale"></div>
|
|
</section>
|
|
|
|
<!-- ELEVATION -->
|
|
<section>
|
|
<h2>Elevation — lightness, not shadow</h2>
|
|
<div class="elev" style="background: var(--bg)">
|
|
<span class="cap">--bg</span>
|
|
<div class="elev inner" style="background: var(--layer-01); margin-top: var(--space-4)">
|
|
<span class="cap">--layer-01</span>
|
|
<div class="elev inner" style="background: var(--layer-02); margin-top: var(--space-4)">
|
|
<span class="cap">--layer-02 (overlays, popovers)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BUTTONS -->
|
|
<section>
|
|
<h2>Buttons — square, 600 weight</h2>
|
|
<div class="row">
|
|
<button class="btn btn-primary">Create snippet</button>
|
|
<button class="btn btn-secondary">Duplicate</button>
|
|
<button class="btn btn-ghost">Cancel</button>
|
|
<button class="btn btn-danger">Delete</button>
|
|
<button class="btn btn-primary" disabled>Disabled</button>
|
|
</div>
|
|
<div class="row" style="margin-top: var(--space-5)">
|
|
<button class="btn btn-primary sm">Compact</button>
|
|
<button class="btn btn-secondary sm">Compact</button>
|
|
<button class="btn btn-ghost sm">Compact</button>
|
|
</div>
|
|
<p class="cap" style="margin-top: var(--space-4)">
|
|
Tab through to see the focus ring (2px accent outline).
|
|
</p>
|
|
|
|
<h3 style="margin-top: var(--space-6)">Emphasis hierarchy — a header cluster</h3>
|
|
<p class="cap" style="margin-bottom: var(--space-4)">
|
|
Utilities go <strong>ghost</strong> (icon + text, borderless) so they recede; a divider
|
|
sets off <strong>Donate</strong> on a <strong>soft-accent</strong> wash — one low-key
|
|
solicitation, no border. (Carbon: one high-emphasis action per region; utilities at low
|
|
emphasis.)
|
|
</p>
|
|
<div class="row" style="align-items: center">
|
|
<button class="btn btn-ghost-util sm">
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<rect x="8" y="18" width="4" height="2" />
|
|
<rect x="14" y="18" width="4" height="2" />
|
|
<rect x="8" y="14" width="4" height="2" />
|
|
<rect x="14" y="22" width="4" height="2" />
|
|
<rect x="20" y="14" width="4" height="2" />
|
|
<rect x="20" y="22" width="4" height="2" />
|
|
<path
|
|
d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"
|
|
/></svg
|
|
>Datasets
|
|
</button>
|
|
<button class="btn btn-ghost-util sm">
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
|
|
<path d="M6,12l1.41,1.41L15,5.83V24h2V5.83l7.59,7.59L26,12,16,2Z" /></svg
|
|
>Import
|
|
</button>
|
|
<button class="btn btn-ghost-util sm">
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
|
|
<path d="M26,14l-1.41-1.41L17,20.17V2H15V20.17l-7.59-7.58L6,14l10,10Z" /></svg
|
|
>Export
|
|
</button>
|
|
<button class="btn btn-ghost-util sm">
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path d="M17,22V14H13v2h2v6H12v2h8V22Z" />
|
|
<path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z" />
|
|
<path
|
|
d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"
|
|
/></svg
|
|
>About
|
|
</button>
|
|
<span class="hdr-divider"></span>
|
|
<button class="btn btn-soft sm">Donate</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FIELDS -->
|
|
<section>
|
|
<h2>Form controls</h2>
|
|
<div class="row" style="align-items: flex-start; gap: var(--space-7)">
|
|
<div class="field">
|
|
<label>Snippet name</label><input class="input" value="Quarterly revenue" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Comment</label><input class="input" placeholder="Add a note…" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Sort by</label>
|
|
<select class="select">
|
|
<option>Modified</option>
|
|
<option>Created</option>
|
|
<option>Name</option>
|
|
<option>Size</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row"
|
|
style="margin-top: var(--space-5); align-items: flex-start; gap: var(--space-7)"
|
|
>
|
|
<div class="field" style="max-width: 360px">
|
|
<label>Spec (JSON)</label
|
|
><textarea class="textarea">
|
|
{
|
|
"mark": "bar",
|
|
"encoding": { "x": { "field": "category" } }
|
|
}</textarea
|
|
>
|
|
</div>
|
|
<div class="stack">
|
|
<div class="search">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
>
|
|
<circle cx="11" cy="11" r="7" />
|
|
<path d="M21 21l-4.3-4.3" />
|
|
</svg>
|
|
<input class="input" placeholder="Search snippets…" />
|
|
</div>
|
|
<label class="check"><input type="checkbox" checked /> Show only drafts</label>
|
|
<label class="check"><input type="radio" name="r" checked /> Inline data</label>
|
|
<label class="check"><input type="radio" name="r" /> Dataset reference</label>
|
|
<div class="check">
|
|
<span class="toggle"
|
|
><input type="checkbox" checked /><span class="track"></span
|
|
><span class="knob"></span
|
|
></span>
|
|
<span>Live preview</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ICONS -->
|
|
<section>
|
|
<h2>Iconography — Carbon glyphs, fill: currentColor</h2>
|
|
<div class="cap" style="margin-bottom: var(--space-5)">
|
|
The controlled vocabulary (arch 09 §5). One glyph per meaning; 16px default, paired to
|
|
14px body. Filled (not stroked) — they inherit text colour and theme.
|
|
</div>
|
|
<div class="row" style="gap: var(--space-7); flex-wrap: wrap; align-items: flex-start">
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<polygon
|
|
points="17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16"
|
|
/>
|
|
</svg>
|
|
<span class="cap">close</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path
|
|
d="M13.5025,5.4136A15.0755,15.0755,0,0,0,25.096,23.6082a11.1134,11.1134,0,0,1-7.9749,3.3893c-.1385,0-.2782.0051-.4178,0A11.0944,11.0944,0,0,1,13.5025,5.4136M14.98,3a1.0024,1.0024,0,0,0-.1746.0156A13.0959,13.0959,0,0,0,16.63,28.9973c.1641.006.3282,0,.4909,0a13.0724,13.0724,0,0,0,10.702-5.5556,1.0094,1.0094,0,0,0-.7833-1.5644A13.08,13.08,0,0,1,15.8892,4.38,1.0149,1.0149,0,0,0,14.98,3Z"
|
|
/>
|
|
</svg>
|
|
<span class="cap">moon</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<rect x="15" y="2" width="2" height="5" />
|
|
<rect
|
|
x="21.6675"
|
|
y="6.8536"
|
|
width="4.958"
|
|
height="1.9998"
|
|
transform="translate(1.5191 19.3744) rotate(-45)"
|
|
/>
|
|
<rect x="25" y="15" width="5" height="2" />
|
|
<rect
|
|
x="23.1466"
|
|
y="21.6675"
|
|
width="1.9998"
|
|
height="4.958"
|
|
transform="translate(-10.0018 24.1465) rotate(-45)"
|
|
/>
|
|
<rect x="15" y="25" width="2" height="5" />
|
|
<rect
|
|
x="5.3745"
|
|
y="23.1466"
|
|
width="4.958"
|
|
height="1.9998"
|
|
transform="translate(-14.7739 12.6256) rotate(-45)"
|
|
/>
|
|
<rect x="2" y="15" width="5" height="2" />
|
|
<rect
|
|
x="6.8536"
|
|
y="5.3745"
|
|
width="1.9998"
|
|
height="4.958"
|
|
transform="translate(-3.253 7.8535) rotate(-45)"
|
|
/>
|
|
<path
|
|
d="M16,12a4,4,0,1,1-4,4,4.0045,4.0045,0,0,1,4-4m0-2a6,6,0,1,0,6,6,6,6,0,0,0-6-6Z"
|
|
/>
|
|
</svg>
|
|
<span class="cap">sun</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<rect x="8" y="18" width="4" height="2" />
|
|
<rect x="14" y="18" width="4" height="2" />
|
|
<rect x="8" y="14" width="4" height="2" />
|
|
<rect x="14" y="22" width="4" height="2" />
|
|
<rect x="20" y="14" width="4" height="2" />
|
|
<rect x="20" y="22" width="4" height="2" />
|
|
<path
|
|
d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"
|
|
/>
|
|
</svg>
|
|
<span class="cap">dataset</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<polygon
|
|
points="17,15 17,8 15,8 15,15 8,15 8,17 15,17 15,24 17,24 17,17 24,17 24,15"
|
|
/>
|
|
</svg>
|
|
<span class="cap">add</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<rect x="12" y="12" width="2" height="12" />
|
|
<rect x="18" y="12" width="2" height="12" />
|
|
<path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z" />
|
|
<rect x="12" y="2" width="8" height="2" />
|
|
</svg>
|
|
<span class="cap">delete</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
|
|
<path d="M6,12l1.41,1.41L15,5.83V24h2V5.83l7.59,7.59L26,12,16,2Z" />
|
|
</svg>
|
|
<span class="cap">import</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
|
|
<path d="M26,14l-1.41-1.41L17,20.17V2H15V20.17l-7.59-7.58L6,14l10,10Z" />
|
|
</svg>
|
|
<span class="cap">export</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path d="M17,22V14H13v2h2v6H12v2h8V22Z" />
|
|
<path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z" />
|
|
<path
|
|
d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"
|
|
/>
|
|
</svg>
|
|
<span class="cap">info</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path
|
|
d="M18,28A12,12,0,1,0,6,16v6.2L2.41,18.59,1,20l6,6,6-6L11.59,18.59,8,22.2V16A10,10,0,1,1,18,26Z"
|
|
/>
|
|
</svg>
|
|
<span class="cap">revert</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path
|
|
d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
|
|
/>
|
|
</svg>
|
|
<span class="cap">search</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<path
|
|
d="M27,16.76c0-.25,0-.5,0-.76s0-.51,0-.77l1.92-1.68A2,2,0,0,0,29.3,11L26.94,7a2,2,0,0,0-1.73-1,2,2,0,0,0-.64.1l-2.43.82a11.35,11.35,0,0,0-1.31-.75l-.51-2.52a2,2,0,0,0-2-1.61H13.64a2,2,0,0,0-2,1.61l-.51,2.52a11.48,11.48,0,0,0-1.32.75L7.43,6.06A2,2,0,0,0,6.79,6,2,2,0,0,0,5.06,7L2.7,11a2,2,0,0,0,.41,2.51L5,15.24c0,.25,0,.5,0,.76s0,.51,0,.77L3.11,18.45A2,2,0,0,0,2.7,21L5.06,25a2,2,0,0,0,1.73,1,2,2,0,0,0,.64-.1l2.43-.82a11.35,11.35,0,0,0,1.31.75l.51,2.52a2,2,0,0,0,2,1.61h4.72a2,2,0,0,0,2-1.61l.51-2.52a11.48,11.48,0,0,0,1.32-.75l2.42.82a2,2,0,0,0,.64.1,2,2,0,0,0,1.73-1L29.3,21a2,2,0,0,0-.41-2.51ZM25.21,24l-3.43-1.16a8.86,8.86,0,0,1-2.71,1.57L18.36,28H13.64l-.71-3.55a9.36,9.36,0,0,1-2.7-1.57L6.79,24,4.43,20l2.72-2.4a8.9,8.9,0,0,1,0-3.13L4.43,12,6.79,8l3.43,1.16a8.86,8.86,0,0,1,2.71-1.57L13.64,4h4.72l.71,3.55a9.36,9.36,0,0,1,2.7,1.57L25.21,8,27.57,12l-2.72,2.4a8.9,8.9,0,0,1,0,3.13L27.57,20Z"
|
|
/>
|
|
<path
|
|
d="M16,22a6,6,0,1,1,6-6A5.94,5.94,0,0,1,16,22Zm0-10a3.91,3.91,0,0,0-4,4,3.91,3.91,0,0,0,4,4,3.91,3.91,0,0,0,4-4A3.91,3.91,0,0,0,16,12Z"
|
|
/>
|
|
</svg>
|
|
<span class="cap">settings</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<rect x="4" y="6" width="24" height="2" />
|
|
<rect x="4" y="24" width="24" height="2" />
|
|
<rect x="4" y="6" width="2" height="20" />
|
|
<rect x="26" y="6" width="2" height="20" />
|
|
<rect x="7" y="10" width="4" height="12" />
|
|
</svg>
|
|
<span class="cap">pane-library</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<rect x="4" y="6" width="24" height="2" />
|
|
<rect x="4" y="24" width="24" height="2" />
|
|
<rect x="4" y="6" width="2" height="20" />
|
|
<rect x="26" y="6" width="2" height="20" />
|
|
<rect x="14" y="10" width="4" height="12" />
|
|
</svg>
|
|
<span class="cap">pane-editor</span>
|
|
</span>
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--text-secondary);
|
|
"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<rect x="4" y="6" width="24" height="2" />
|
|
<rect x="4" y="24" width="24" height="2" />
|
|
<rect x="4" y="6" width="2" height="20" />
|
|
<rect x="26" y="6" width="2" height="20" />
|
|
<rect x="21" y="10" width="4" height="12" />
|
|
</svg>
|
|
<span class="cap">pane-preview</span>
|
|
</span>
|
|
</div>
|
|
<div class="cap" style="margin-top: var(--space-6)">
|
|
The full Core + pane-toggle set (arch 09 §5.2); the four status glyphs appear, coloured,
|
|
in the Toasts section below. In context: icon + text is the default; icon-only is the
|
|
universal/affordance/destructive exception. ✕ means close only — delete is the trash
|
|
glyph.
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TABS + STATUS -->
|
|
<section>
|
|
<h2>Tabs · status · tags</h2>
|
|
<div class="tabs">
|
|
<button aria-selected="true">Overview</button>
|
|
<button aria-selected="false">Details</button>
|
|
</div>
|
|
<div class="cap" style="margin-top: var(--space-2)">
|
|
Catalog primitive only. The Draft/Published view uses the segmented control (a radio
|
|
group), not tabs — see arch/10.
|
|
</div>
|
|
<div class="row" style="margin-top: var(--space-6)">
|
|
<span class="tag-pill"><span class="dot draft"></span> Draft changes</span>
|
|
<span class="tag-pill"><span class="dot published"></span> Published</span>
|
|
<span class="tag-pill">
|
|
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
|
<rect x="8" y="18" width="4" height="2" />
|
|
<rect x="14" y="18" width="4" height="2" />
|
|
<rect x="8" y="14" width="4" height="2" />
|
|
<rect x="14" y="22" width="4" height="2" />
|
|
<rect x="20" y="14" width="4" height="2" />
|
|
<rect x="20" y="22" width="4" height="2" />
|
|
<path
|
|
d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"
|
|
/>
|
|
</svg>
|
|
2 datasets
|
|
</span>
|
|
<span class="tag-pill">imported</span>
|
|
</div>
|
|
<div class="row" style="margin-top: var(--space-5)">
|
|
<span class="badge" style="background: var(--support-success)">Saved</span>
|
|
<span class="badge" style="background: var(--support-error)">Error</span>
|
|
<span class="badge" style="background: var(--support-warning); color: #161616"
|
|
>82% full</span
|
|
>
|
|
<span class="badge" style="background: var(--support-info)">Info</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- LIST + PANEL -->
|
|
<section>
|
|
<h2>Snippet library & metadata panel</h2>
|
|
<div class="row" style="align-items: flex-start; gap: var(--space-7)">
|
|
<div class="list">
|
|
<div class="item active">
|
|
<div class="main">
|
|
<div class="name">Quarterly revenue</div>
|
|
<div class="sub">
|
|
<span class="indicator"><span class="dot draft"></span></span
|
|
><span>Today · 2 KB</span>
|
|
</div>
|
|
</div>
|
|
<button class="del" title="Delete">
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
>
|
|
<path d="M5 7h14M9 7V5h6v2M7 7l1 12h8l1-12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="item">
|
|
<div class="main">
|
|
<div class="name">Population by region</div>
|
|
<div class="sub"><span class="indicator"></span><span>Yesterday</span></div>
|
|
</div>
|
|
<button class="del" title="Delete">
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
>
|
|
<path d="M5 7h14M9 7V5h6v2M7 7l1 12h8l1-12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="item">
|
|
<div class="main">
|
|
<div class="name">Scatter · height vs weight</div>
|
|
<div class="sub"><span class="indicator"></span><span>3d ago</span></div>
|
|
</div>
|
|
<button class="del" title="Delete">
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
>
|
|
<path d="M5 7h14M9 7V5h6v2M7 7l1 12h8l1-12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h4>Quarterly revenue</h4>
|
|
<div class="meta-row"><span class="k">Created</span><span>2026-06-01</span></div>
|
|
<div class="meta-row"><span class="k">Modified</span><span>Today 14:30</span></div>
|
|
<div class="meta-row">
|
|
<span class="k">Status</span
|
|
><span><span class="dot draft"></span> Draft changes</span>
|
|
</div>
|
|
<div class="row" style="margin-top: var(--space-5)">
|
|
<button class="btn btn-primary sm">Publish</button>
|
|
<button class="btn btn-ghost sm">Revert</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TOASTS -->
|
|
<section>
|
|
<h2>Toasts</h2>
|
|
<div class="cap" style="margin-bottom: var(--space-4)">
|
|
Filled status glyph + colour + text — a non-colour severity channel (arch 09 §5.2 / 10
|
|
§3). The triangle shape-codes warning apart from the round error/success/info.
|
|
</div>
|
|
<div class="stack" style="max-width: 360px">
|
|
<div class="toast info">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 32 32"
|
|
style="fill: currentColor; flex: none; color: var(--support-info)"
|
|
>
|
|
<path
|
|
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
|
|
/>
|
|
</svg>
|
|
Snippet duplicated.
|
|
</div>
|
|
<div class="toast success">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 32 32"
|
|
style="fill: currentColor; flex: none; color: var(--support-success)"
|
|
>
|
|
<path
|
|
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"
|
|
/>
|
|
</svg>
|
|
Published “Quarterly revenue”.
|
|
</div>
|
|
<div class="toast warning">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 32 32"
|
|
style="fill: currentColor; flex: none; color: var(--support-warning-fg, #8a6d00)"
|
|
>
|
|
<path
|
|
d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"
|
|
/>
|
|
</svg>
|
|
Snippet storage is 82% full.
|
|
</div>
|
|
<div class="toast error">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 32 32"
|
|
style="fill: currentColor; flex: none; color: var(--support-error)"
|
|
>
|
|
<path
|
|
d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"
|
|
/>
|
|
</svg>
|
|
Could not save — storage is full.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- OVERLAY DIALOG -->
|
|
<section>
|
|
<h2>Overlay dialog — confirm / alert</h2>
|
|
<p class="cap">
|
|
The in-app replacement for <code>window.confirm</code>. Backdrop dims but does NOT dismiss
|
|
(Carbon transactional rule); danger variant for destructive intent, with Cancel taking
|
|
focus. Behavior lives in
|
|
<code>docs/architecture/03 → Confirmation & alert dialogs</code>.
|
|
</p>
|
|
<div class="dialog-stage">
|
|
<div class="dialog" role="alertdialog" aria-label="Danger confirm example">
|
|
<h3>Delete snippet</h3>
|
|
<p>Delete “Quarterly revenue”? This cannot be undone.</p>
|
|
<div class="actions">
|
|
<button class="btn btn-secondary">Cancel</button>
|
|
<button class="btn btn-danger">Delete</button>
|
|
</div>
|
|
</div>
|
|
<div class="dialog" role="alertdialog" aria-label="Default confirm example">
|
|
<h3>Discard changes?</h3>
|
|
<p>You have unsaved edits — leaving will discard them.</p>
|
|
<div class="actions">
|
|
<button class="btn btn-secondary">Keep editing</button>
|
|
<button class="btn btn-primary">Discard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CODE -->
|
|
<section>
|
|
<h2>Code / editor surface — IBM Plex Mono</h2>
|
|
<div class="code">
|
|
{ "$schema": "https://vega.github.io/schema/vega-lite/v6.json", "data": { "values": [{
|
|
"category": "A", "value": 28 }] }, "mark": "bar", "encoding": { "x": { "field":
|
|
"category", "type": "nominal" }, "y": { "field": "value", "type": "quantitative" } } }
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MOTION -->
|
|
<section>
|
|
<h2>Motion — productive only (150ms, restrained)</h2>
|
|
<div class="motion-stage" id="motionStage">
|
|
<div class="motion-box"></div>
|
|
</div>
|
|
<div class="row" style="margin-top: var(--space-5)">
|
|
<button class="btn btn-secondary sm" id="motionBtn">Play transition</button>
|
|
<span class="cap"
|
|
>Neutralized automatically under <code>prefers-reduced-motion</code>.</span
|
|
>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const root = document.documentElement;
|
|
|
|
// Theme switch
|
|
document.getElementById('theme').addEventListener('click', (e) => {
|
|
const b = e.target.closest('button');
|
|
if (!b) return;
|
|
root.setAttribute('data-theme', b.dataset.themeVal);
|
|
for (const x of e.currentTarget.children) x.setAttribute('aria-pressed', String(x === b));
|
|
renderSwatches();
|
|
});
|
|
|
|
// Accent switch
|
|
document.getElementById('accent').addEventListener('click', (e) => {
|
|
const b = e.target.closest('button');
|
|
if (!b) return;
|
|
root.setAttribute('data-accent', b.dataset.accentVal);
|
|
for (const x of e.currentTarget.children) x.setAttribute('aria-pressed', String(x === b));
|
|
renderSwatches();
|
|
});
|
|
|
|
// Tabs (specimen only)
|
|
document.querySelectorAll('.tabs').forEach((t) =>
|
|
t.addEventListener('click', (e) => {
|
|
const b = e.target.closest('button');
|
|
if (!b) return;
|
|
for (const x of t.children) x.setAttribute('aria-selected', String(x === b));
|
|
}),
|
|
);
|
|
|
|
// Motion demo
|
|
document
|
|
.getElementById('motionBtn')
|
|
.addEventListener('click', () =>
|
|
document.getElementById('motionStage').classList.toggle('go'),
|
|
);
|
|
|
|
// Live swatches read the resolved token values for the current theme/accent
|
|
const ROLE_TOKENS = [
|
|
'--bg',
|
|
'--layer-01',
|
|
'--layer-02',
|
|
'--border',
|
|
'--border-strong',
|
|
'--text',
|
|
'--text-secondary',
|
|
'--text-placeholder',
|
|
];
|
|
const ACCENT_TOKENS = [
|
|
'--accent',
|
|
'--accent-hover',
|
|
'--support-error',
|
|
'--support-success',
|
|
'--support-warning',
|
|
'--support-info',
|
|
];
|
|
function swatchHTML(token) {
|
|
const val = getComputedStyle(root).getPropertyValue(token).trim();
|
|
return `<div class="swatch"><div class="chip" style="background:${val}"></div><div class="meta"><span class="name">${token}</span><span class="val">${val || '—'}</span></div></div>`;
|
|
}
|
|
function renderSwatches() {
|
|
document.getElementById('roleSwatches').innerHTML = ROLE_TOKENS.map(swatchHTML).join('');
|
|
document.getElementById('accentSwatches').innerHTML =
|
|
ACCENT_TOKENS.map(swatchHTML).join('');
|
|
}
|
|
|
|
// Spacing scale
|
|
(function () {
|
|
const steps = [
|
|
['--space-1', '2px'],
|
|
['--space-2', '4px'],
|
|
['--space-3', '8px'],
|
|
['--space-4', '12px'],
|
|
['--space-5', '16px'],
|
|
['--space-6', '24px'],
|
|
['--space-7', '32px'],
|
|
['--space-8', '48px'],
|
|
['--space-9', '64px'],
|
|
];
|
|
document.getElementById('spaceScale').innerHTML = steps
|
|
.map(
|
|
([t, v]) =>
|
|
`<div class="space-row"><span class="tag">${t}</span><span class="space-bar" style="width:${v}"></span><span class="cap">${v}</span></div>`,
|
|
)
|
|
.join('');
|
|
})();
|
|
|
|
renderSwatches();
|
|
</script>
|
|
</body>
|
|
</html>
|