cfc8f2b22c
New /components route showing every ui primitive (Panel, StatusChip, Table) in each mode it supports: Panel with/without a title, StatusChip's four tones, Table populated and empty. Sample data only, no API calls, so it renders identically regardless of backend state. Linked from the Shell nav next to "overview". Verified with npm run build + npm run typecheck, and a headless chromium screenshot of the built dist.
44 lines
965 B
CSS
44 lines
965 B
CSS
/* <ComponentsPage> layout — a plain vertical stack of sections, each a
|
|
labelled grid of samples. No new colour vars: reuses the same
|
|
base16 slots (../theme.css) every other component draws from, so
|
|
this page can't drift from the palette it's demonstrating. */
|
|
.components-intro {
|
|
margin: 0 0 1.5em;
|
|
color: var(--muted);
|
|
}
|
|
.components-intro code {
|
|
color: var(--fg);
|
|
}
|
|
.components-section {
|
|
margin-bottom: 2em;
|
|
}
|
|
.components-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.components-section-title {
|
|
margin: 0 0 0.75em;
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--muted);
|
|
}
|
|
.components-section-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1em;
|
|
}
|
|
.components-chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1em;
|
|
}
|
|
.components-sample {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4em;
|
|
}
|
|
.components-sample-label {
|
|
font-size: 0.8em;
|
|
color: var(--muted);
|
|
}
|