mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 15:46:30 +03:00
Abdul WahabandClaude Fable 5
065bd4f3ca
- palette-picker.js: drop the superseded APP/DOCS/INDEX copy tables, the disabled font-rail hoist machinery, LOREM.caption, and an orphan marker - design-context.css + dcx-hierarchy.css: drop the demo-era specimen, radius, and spacing-bar rule groups nothing renders - index.astro: drop an unreferenced boards const - de-export module-internal names (store, bindings, portability, visual-cues); remove picker-server's unused doc-session kill switch and document --doc in its help - palette.mjs: realpath the entry guard so symlinked installs still run the CLI (same guard as visual-cues.mjs) - revert serve-question.mjs copy ride-along; drop the plan/ gitignore entry; dedupe a build-picker comment; file design-context with the system category entries; alphabetize IMPECCABLE_SUB_COMMANDS - new-work.md: drop a same-screen restatement of the comp/world ranking - CLAUDE.md: correct the picker gate baseline to the measured 606 and explain the per-element multiplication; the trims removed the two dead-block font findings - DESIGN-CONTEXT-ARCHITECTURE.md: list portability.mjs in the code layout Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
136 lines
4.0 KiB
CSS
136 lines
4.0 KiB
CSS
/* Shared information hierarchy for every Design Context article.
|
|
Labels identify a field; values carry the decision; supporting copy explains it. */
|
|
|
|
.dcx-expander {
|
|
--dcx-hierarchy-title: var(--ks-champagne);
|
|
--dcx-hierarchy-value: var(--ks-text);
|
|
--dcx-hierarchy-support: var(--ks-text-muted);
|
|
--dcx-hierarchy-label: var(--ks-text-faint);
|
|
--dcx-hierarchy-label-size: 0.68rem;
|
|
--dcx-hierarchy-value-size: 0.96rem;
|
|
}
|
|
|
|
/* Definition lists: labels recede, committed values lead. */
|
|
.dcx-detail-article .dcx-detail-defs .dcx-def dt,
|
|
.dcx-audience .dcx-audience-section--people .dcx-def dt {
|
|
color: var(--dcx-hierarchy-label);
|
|
font-family: var(--ks-mono);
|
|
font-size: var(--dcx-hierarchy-label-size);
|
|
font-weight: 500;
|
|
letter-spacing: 0.14em;
|
|
line-height: 1.45;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dcx-detail-article .dcx-detail-defs .dcx-def dd,
|
|
.dcx-audience .dcx-audience-section--people .dcx-def dd {
|
|
margin-top: 9px;
|
|
color: var(--dcx-hierarchy-value);
|
|
font-size: var(--dcx-hierarchy-value-size);
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.dcx-detail-article .dcx-detail-defs .dcx-def dd strong {
|
|
color: inherit;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* The prose inside a decision component is content, not metadata. */
|
|
.dcx-detail-article .dcx-callout > p:not(.dcx-callout-name),
|
|
.dcx-audience .dcx-callout > p:not(.dcx-callout-name),
|
|
.dcx-detail-article .dcx-principles li,
|
|
.dcx-detail-article .dcx-voice-cell > p,
|
|
.dcx-detail-article .dcx-ref-takeaway,
|
|
.dcx-detail-article .dcx-surface-goal,
|
|
.dcx-detail-article .dcx-swatch-meta > p,
|
|
.dcx-detail-article .dcx-scale-head,
|
|
.dcx-detail-article .dcx-pick-desc,
|
|
.dcx-detail-article .dcx-asset-caption > p,
|
|
.dcx-detail-article .dcx-prose {
|
|
color: var(--dcx-hierarchy-value);
|
|
}
|
|
|
|
/* These callout headings describe the field; the following paragraph is the answer. */
|
|
.dcx-audience .dcx-audience-journey .dcx-callout-name,
|
|
.dcx-detail-article .dcx-detail-section--positioning .dcx-callout-name,
|
|
.dcx-detail-article .dcx-detail-section--primary-conversion .dcx-callout-name,
|
|
.dcx-detail-article .dcx-detail-section--anti-reference .dcx-callout-name {
|
|
margin-bottom: 9px;
|
|
color: var(--dcx-hierarchy-label);
|
|
font-family: var(--ks-mono);
|
|
font-size: var(--dcx-hierarchy-label-size);
|
|
font-weight: 500;
|
|
letter-spacing: 0.14em;
|
|
line-height: 1.45;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dcx-audience .dcx-audience-journey .dcx-callout-name + p,
|
|
.dcx-detail-article .dcx-detail-section--positioning .dcx-callout-name + p,
|
|
.dcx-detail-article .dcx-detail-section--primary-conversion .dcx-callout-name + p,
|
|
.dcx-detail-article .dcx-detail-section--anti-reference .dcx-callout-name + p {
|
|
color: var(--dcx-hierarchy-value);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Preserve prominent answer titles inside components. */
|
|
.dcx-detail-article :is(
|
|
.dcx-detail-principle-copy strong,
|
|
.dcx-ref-name,
|
|
.dcx-surface-name,
|
|
.dcx-pair-name,
|
|
.dcx-pick-title,
|
|
.dcx-empty-title
|
|
) {
|
|
color: var(--dcx-hierarchy-title);
|
|
}
|
|
|
|
.dcx-detail-article .dcx-ref-name {
|
|
font-family: var(--ks-font);
|
|
}
|
|
|
|
/* In the palette, the role is the label and the hex is the committed value. */
|
|
.dcx-detail-article--color .dcx-cue-band-label {
|
|
color: var(--dcx-hierarchy-label);
|
|
font-family: var(--ks-mono);
|
|
font-size: var(--dcx-hierarchy-label-size);
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dcx-detail-article--color .dcx-cue-band-value {
|
|
font-size: clamp(0.7rem, 1vw, 0.78rem);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Type-scale rows follow the same label / value / supporting-value order. */
|
|
.dcx-detail-article--typography .ts-sample {
|
|
color: var(--ks-champagne) !important;
|
|
}
|
|
|
|
.dcx-detail-article--typography .ts-tag {
|
|
color: var(--dcx-hierarchy-label);
|
|
font-family: var(--ks-mono);
|
|
font-size: 16px !important;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.dcx-detail-article--typography .ts-values {
|
|
gap: 12px;
|
|
}
|
|
|
|
.dcx-detail-article--typography .ts-values b {
|
|
color: var(--dcx-hierarchy-value);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dcx-detail-article--typography .ts-values i {
|
|
color: var(--dcx-hierarchy-support);
|
|
}
|